サイト開発ログ

2019-04-09   (Updated : 2019-04-12)

2018-07

もういい大人なので、自分のサイトをイチから作り直そうと思った。 過去に作ったものの技術やサーバが散らばっていて、一元管理して整理したい思いもあった。

さて何かを作るとき、初めに必要なことは設計と技術選定だ。

  • 学生の頃は、手で HTML と CSS を書いていた。だがもうそんな時代ではない
  • 新卒の頃は、自前の文法を変換するジェネレータを Python で書いた。若かったのだ
  • その後、世界では Markdown から静的サイトを生成するものが流行った
    • 自分の場合は ruhoh というジェネレータを使って 技術メモやブログを書いてみた
    • これは悪くなかったが ruhoh というツールはどうにもマイナーで、開発も途絶えてしまったようだ

現代においてエンジニアの間では、Markdown (とりわけ GitHub Flavored Markdown) はスタンダードとなった。 Markdown… 不満や物足りなさは無いわけではないが、サイトの文書や技術メモを書くには十分だろう。 (書籍を書こうと思ったら AsciiDoc とかの方が良さそうだけど)

何か時代に合った、ちょうどよいサイトジェネレータを探してそれを試してみよう。

2018-09

Hugo を使う

ジェネレータは Hugo に決めた。 Go 製で、ビルドの速さが素晴らしい。人気もそれなりに高そう。 HTML テンプレートは若干クセがあるがまあよいだろう。速いのは正義だ。

自分の趣味サイトなのでデザインも自分で作る。CSS を書く環境を整えよう。

Bootstrap 4 をベースに scss を書いてカスタマイズする

さすがに CSS をゼロから書くことはせず、フレームワークを利用する。 Bootstrap が無難だろう。現在のメジャーバージョンは 4 だ。

CSS 自体は生でしか書いたことがなかったが、せっかくなので SASS でやってみようかと思い立つ。

以下を参考にして Bootstrap の scss ファイルを手に入れた:

Node を入れて node-sass の力で scss をコンパイルする。 以下のような package.json を書いた:

{
  "name": "altotascal_css",
  "version": "0.0.1",
  "description": "Customized Bootstrap sass",
  "scripts": {
    "test": "echo \"Hello\"",
    "css-min": "node-sass ./index.scss ../hugo_project/themes/altotascal/static/css/altotascal.min.css --output-style compressed",
    "css-min-watch": "npm run css-min -- --watch"
  },
  "author": "Tatsuya Koyama",
  "dependencies": {
    "node-sass": "^4.9.3"
  }
}

index.scss はこういうイメージ:

@charset "utf-8";

@import "bootstrap-4.1.3/scss/bootstrap.scss";

@import "scss/altotascal_layout";
@import "scss/altotascal_flavor";
...

具体的な css は scss/ 以下のファイルに記述していく。 これで npm run css-min-watch しておけば、scss ファイルを書き換えるだけで css が更新される感じになった。

サイトのレイアウトを考える

過去に作ったものの反省だったり、世の中のサイトを見てきた経験から、 自分は以下のような形が一番見やすい / ページを辿りやすいなという結論に行き着いた:

  • 3 段組み
    • 左にアコーディオン型メニュー / 中央に記事 / 右に記事の目次(ToC)
  • 上部に固定のナビゲーションバー
    • サイトは内容でセクションに分ける
    • ナビゲーションバーに各セクションへのリンクを置く

3 段組みは PC 向けのものだが、スマートフォンでも見れるようにレスポンシブにしておく。 (Bootstrap が大体やってくれるけど)

2018-10

アウトラインの生成

技術メモは 1 つの記事が長くなることも多いので、使い勝手と手触りのよいアウトライン表示が必要だった。 これについては試行錯誤して自分好みのものをつくった。成果物は Lab. の方にまとめた:

ホスティングとデプロイ

  • 手頃な VPS で適当に Apache を動かしておく
  • 手元で以下のような Makefile を書いておく
deploy:
	hugo -DF --cleanDestinationDir \
	&& rsync -avz --delete public/ user@host:/path/to/altotascal
  • make deploy と打ってデプロイ

素朴だが、趣味のサイトの運用にはこれで十分だろう。

2018-11

Web 上で音源を再生する方法について考える

HTML5 という言葉が現れて久しいが、audio タグをそのまま使うと UI がブラウザ依存になる。

デザインを整えるのに都合のよいツールは何か無いだろうか。 js のライブラリなどを探してみるとしよう。

SoundCloud というのもあるが、有料サービスへの依存は減らせるなら減らしたい。 YouTube ほどの王者なら身を委ねてもよいが、自作曲を全て動画で公開するのも微妙だし。

最終的に僕は Plyr という js のライブラリを選んだ。 audio タグを後から統一した見た目に置き換えてくれるもので、使い勝手がよさそうだったので。

↑ こんな感じで UI の環境差を(完全ではないがある程度)埋めてくれる

2019-02

双方向リンクが欲しかった

  • 「このページを参照しているサイト内ページ」 が表示されていると、情報が辿りやすくなる (関連する情報に気づきやすくなる)
    • エンジニアは GitHub の Pull Request とかでおなじみだと思う
    • 企業向けの Wiki サービスとかにもたまにあったりする
  • Hugo のページ変数で「自分を参照しているページ達」が取得できたら素敵だったが、現状そういうものは無さそうだ
    • とりあえず各ページに手動で書いておく(shortcode で多少の楽はする)
    • 内部的に Hugo の ref を使っていれば、リンクが切れた時にエラーで気づけるので、まあとりあえずこれで。