概要

mygram-app は「フォルダに写真を入れてスクリプトを走らせるだけ」で完結する静的な写真サイト生成ツールです。サーバーサイドやDBを使わず、HTML/CSS/バニラJSのみで動作するため、ホスティングは静的ファイル配信ができれば十分。プロフィール風の3カラム1:1クロップのグリッド表示、月ごとにまとめたタイムライン表示、拡大表示用のライトボックスといったSNS風のUIを提供します。シンプルさとセルフホスト性を重視した設計が特徴です。

リポジトリの統計情報

スター数: 1
フォーク数: 1
ウォッチャー数: 1
コミット数: 5
ファイル数: 13
メインの言語: JavaScript

主な特徴

シンプルなワークフロー：画像を専用フォルダに追加してスクリプトを実行するだけでサイトが更新される
静的生成：サーバーやデータベース不要で静的ホスティングに最適
InstagramライクなUI：3列グリッド、タイムライン、ライトボックスを備える
依存が少ない：ビルドツールやフレームワークに依存せず、HTML/CSS/Vanilla JS中心

技術的なポイント

mygram-app は「静的生成」と「フロントエンドでの軽量表示」に振った設計が最大の特徴です。バックエンドを持たないため、ホスティングはGitHub Pagesや任意の静的ファイルサーバで済み、インフラコストや運用負荷を下げられます。画像の投入フローはファイルベースで完結し、添付されたスクリプト（リポジトリ内にあるシェル／Node スクリプト等を想定）がディレクトリを走査して必要なHTMLやメタ情報を生成します。UI側はバニラJavaScriptで実装されており、1:1クロップのグリッドレイアウトはCSSの柔軟性を活かした実装で、レスポンシブ対応やカード型のタイムライン表示にも対応しています。ライトボックスは追加のライブラリを使わず自前の実装で画像拡大・ナビゲーションを提供するため、依存関係が少なく保守しやすい点もポイントです。月別グループ化やフィードの並び替えはファイルのタイムスタンプや命名規則を用いる設計が考えられ、メタデータ管理も極力ファイルシステム中心に置くことでシンプルさを保っています。こうした「単純で明快」なアーキテクチャは、小規模な写真ポートフォリオやオフラインでの展示、低コストなセルフホスティングに適しています。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitattributes: file
.gitignore: file
LICENSE: file
README.md: file
assets: dir

…他 8 ファイル

まとめ

シンプルさ重視の静的写真サイトを素早く作れる実用的なツール。

リポジトリ情報：

名前: mygram-app
説明: Self-hosted photo site that mirrors a familiar social media app.
スター数: 1
言語: JavaScript
URL: https://github.com/KevDoy/mygram-app
オーナー: KevDoy
アバター: https://avatars.githubusercontent.com/u/11251011?v=4

READMEの抜粋：

mygram

A static, Instagram-style photo portfolio website. Drop photos into a folder, run a script, and your site updates automatically. No server, no database, no build tools — just HTML, CSS, and vanilla JS.

Features

Grid view — 3-column, 1:1 cropped photo grid (like Instagram profile)
Timeline view — Vertical card feed grouped by month
Lightbox — Full-…

mygram — セルフホスト型写真ポートフォリオ