Zenn
📷

moul で作るミニマルなフォトコレクション

2021/04/30に公開
HTML
PowerShell
SSG
Squoosh
moul
tech

https://github.com/moulco/moul

The minimalist publishing tool for photographers

Go で書かれた SSG （静的サイトジェネレータ）です。
シングルバイナリで完結したミニマルさで、こんな感じ のフォトコレクションを簡単に作れます。

事前準備：画像の圧縮

ウェブ公開用なので事前に画像を軽量化しておきます。

数多ある圧縮ツールのなかでも、Google 謹製の Squoosh が画質の劣化も少なくていい感じです。

上記サイトで GUI で操作することもできますが、複数画像の一括圧縮には CLI が便利です。
npm でインストールして、PowerShell コマンドレットから呼び出せるようにします。

function Invoke-Squoosh {
    param (
        [parameter(ValueFromPipeline = $true)]$inputObj
        ,[int]$quality = 90
        ,[int]$maxWidth
        ,[string]$outDir = "."
        ,[string]$suffix = "_sqsh"
    )
    begin {
        $outDirPath = (Resolve-Path $outDir).Path
        if (-not (Test-Path $outDirPath -PathType Container)) {
            New-Item -Path $outDirPath -ItemType Directory
        }
    }
    process {
        $file = Get-Item $inputObj
        if ($file.Extension -match "jpe?g$") {
            $cmd = "squoosh-cli --mozjpeg '{quality:$($quality)}' -d '$($outDirPath)' -s '$($suffix)$($quality)' '$($file.FullName)'"
            if($maxWidth) {
                $cmd += "--resize '{width:$($maxWidth)}'"
            }
            $cmd | Invoke-Expression
        }
    }
    end {}
}

maxWidth は指定しなくても後述のエクスポート時に自動でリサイズされる模様。

下記のようにパイプでファイルを渡せるので事前に絞り込みなどできて便利です。

# 1週間以内に撮影したファイルを圧縮
ls | where LastWriteTime -gt (Get-Date).AddDays(-7) | Invoke-Squoosh

※圧縮時には自動で Exif 情報も削除されるようです。

コレクションの作成

呼び出しラッパー

Scoop で見つからなかったので公式でリリースされている exe をダウンロードして適当なディレクトリに置きます。bucket を自作する方法もありますが、とりあえず今回はバイナリを下記の PowerShell コマンドレットで呼び出す方法を採用。

function moul {
    & ("C:\Users\{0}\Tools\cli\moul\moul_windows_amd64.exe" -f $env:USERNAME) $args
}

moul のコマンドは以下の3つのみです。ﾐﾆﾏﾙ!

  • moul create （コレクション名）
  • moul preview
  • moul export

実際に作ってみる

まずはコレクションを作成します。今回は鎌倉旅行時（2019年）の写真なので、 kamakura というコレクション名にしようと思います。

moul create kamakura

kamakura というディレクトリが生成されるので、中の photos に掲載したい写真を入れていきます。

見たままですが、 avatar にはアバター画像、 collection にメインの写真、 cover にカバー画像を配置します。

各種設定は moul.toml を編集します（詳しくは 公式のサンプル を参照）。

下記コマンドを実行してブラウザから http://localhost:5000/ にアクセスすることでプレビューできます。レイアウトなどを調整しながら仕上げていきましょう。

moul preview

問題なし！ となったらエクスポートします。

moul export

画像や css などをひとまとめにした dist というディレクトリが生成されるので、これを公開します（オプションで別名にすることも可）。

経験からの注意点としては、

  • カバー写真は大きめサイズのほうが吉（画面イッパイに引き伸ばされるため）
  • ファイル名に空白は含めないほうが安全（プレビューでうまく表示されてもデプロイするとファイルが見つからない的なエラーになりました）

といったところでしょうか。

Netlify で公開

github 経由で公開するので、まずは kamakura ディレクトリで git init してリポジトリを作成します。一通りコミットしてプッシュしておきましょう。

後は Netlify で New site from Git ボタンから新規サイト作成画面に進み……

エクスポートしたディレクトリ名でデプロイすれば公開完了です。

enjoy photo life!

Discussion