サイト開発ログ

2019-04-09   (Updated : 2019-11-06)

2018-07

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

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

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

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

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

2018-09

Hugo を使う

ジェネレータは Hugo に決めた。 Go 製で、ビルドの速さが素晴らしい。人気もそれなりに高そう。 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 つの記事が長くなることも多いので、使い勝手と手触りのよいアウトライン表示が必要だった。 これについては試行錯誤して自分好みのものをつくった。成果物は以下：

ホスティングとデプロイ
  • 手頃な 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 を使っていれば、リンクが切れた時にエラーで気づけるので、まあとりあえずこれで。

2019-05

Twitter や Slack にサイトの URL に貼ったときにプレビューが展開されるようにする

それ用の meta タグを記述することで対応させる。 OGP というキーワードで検索すると情報が出てくる：

自分の場合は以下のような記述を Hugo のテンプレートに組み込んだ：

  <meta property="og:title" content="{{ .Title }}" />
  <meta property="og:url" content="{{ .Permalink }}"/>
  <meta property="og:image" content="{{ .Site.BaseURL }}{{ if .Params.eyecatch }}{{ .Params.eyecatch }}{{ else }}img/illust/alto-tascal/alto-tascal-voxel.jpg{{ end }}" />
  <meta property="og:site_name"  content="Alto-tascal" />
  <meta property="og:description" content="{{ if .IsPage }}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="{{ .Title }}{{ if .Title }} | {{ end }}Alto-tascal" />
  <meta name="twitter:url" content="{{ .Permalink }}" />
  <meta name="twitter:description" content="{{ if .IsPage }}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
  <meta name="twitter:image" content="{{ .Site.BaseURL }}{{ if .Params.eyecatch }}{{ .Params.eyecatch }}{{ else }}img/illust/alto-tascal/alto-tascal-voxel.jpg{{ end }}" />
  <meta name="twitter:site" content="@tatsuya_koyama" />
  <meta name="twitter:creator" content="@tatsuya_koyama" />

2019-11

HTTPS 化対応をする

本来であればサイトを作り直したタイミングでやっておくべきだったのだが、横着してやっていなかった。 Let’s Encrypt を利用して対応した：



Tatsuya Koyama

 /