soussune を支える技術 2017

miyaoka
soussune
Published in
4 min readDec 8, 2017

この記事は soussune Advent Calendar の8日目です。

soussuneのWebサイトはGitHubを使ってオープンソースで運営してます。

https://github.com/soussune/soussune.github.io

ここに全てがあります。今日はこのへんの技術的な話をしていこうかなと思います。

まずWebサイトを作ってるのはJekyllというツールです。『ジキルとハイド』のあのジキルです。これはStatic site generatorと呼ばれる仕組みで、テキストファイルをHTMLに変換してwebサイトを生成します。

WordPressみたいな記事管理システムのことをCMSって言うんですが、あれの管理画面とかが無くて単に記事を生成するだけ版とでも言えばいいんですかね。こういう仕組みはあらゆる言語でいろんな実装がされています。(参考:https://www.staticgen.com/

(よくデータの読み書きロジックとUIの実装デモとしてシンプルなToDo管理ツールを作って言語別に比較するTodoMVCというやつがあるんですが、Static site generatorの実装がたくさんあるのもそれに近い気はします。自分の知ってる言語でやっている処理を別の言語で書くとどうなんだろうというのを手っ取り早く試すのに余計なものが無くてちょうどいいのではないかなと思います。https://soussune.com/episode/14 このへんの回でそういう話をしてます)

記事を書くときはローカル環境でJekyllサーバーを立ち上げてそこで表示を確認しながら編集していきます。内容が整ったらブランチ切ってGitリポジトリにコミットし、GitHubにpushしてPullRequest作ってマージすることで本番リリースをしています。エンジニア同士だとこうしたGitHubベースのやり取りにすることで複数人での共同作業や確認が円滑にやりやすい仕組みになっています。

このへんもうちょっと詳しい話をまた日を改めて書きます。

で、Jekyllは特にGitHub Pagesで使われてるので、]ekyllプロジェクトのソースファイルはGitHubにアップするだけで勝手にサイトがビルドされて公開できます。便利ですねー。(まあこのへんはCIツールを使えば別になんでもビルドできるわけなんですが)

そもそもは Yattecast でサイトを作り始めたので、これがJekyll製だからというので使っています。国内ではRebuildから派生するエンジニア系ポッドキャストでよく使われている感じがします。

でもRuby製のJekyllってのはけっこう昔ながらっていうか、サーバーサイドで静的ファイルをレンダリングするだけのシンプルなものなので、今どきのようにJavaScriptが主体になっていろいろ制御しようとするのは難しいというかマッチしていないというのが不満なところです。

自分はフロント技術のほうが得意なので、JavaScriptを前提にしたページ生成にしたほうが、いろんなことができちゃうわけですね。まあポッドキャストのサイトにそんなに求めてもアレなのですが。たとえば記事も増えてきたことだし、動的な検索機能をつけたいとか、ページ遷移時にページ全体読み直さないようにして遷移早くするとか、音声プレイヤーの制御とか。そのへんのアレですね。

でまあVue.js推しなsoussuneとしては Vueを使ったユニバーサルアプリのNuxt.jsでサイト構築すれば全て解決しそうだなとは思ってます。ただ、 ポッドキャストに一番必須であるRSSフィードの生成が標準で無いらしいので、そのへんを自前でどうにかする必要があるらしいです。らしいとばかり言ってるのは僕がまだちゃんと調べてないからです。おわり

--

--