See the Elephant

日常ブログ

ヘッドホンが好きだからヘッドホンのサイトを作ってみた2 〜技術編〜

http://namu-r21.hatenablog.com/entry/2018/07/23/130351

前回記事でヘッドホン視聴サービスを作ったことについて書いた.
今回は, 技術的な部分について書いていこうと思う.

技術的な話

今回作ったサイトは静的ページで構成されている.

使用した技術は, 以下.

  • Hugo
  • Vue.js

ホスティングサービスは以下を利用した.

Hugo

gohugo.io

Go製の静的ページ生成フレームワークである.
使用実績は 1PasswordLet's Encrypt など著名なサイトにも利用されている.

選定理由としては,

  • 静的ページ作りたかったので手軽に始めたい
  • 弊社ajito.fmで利用してるFWだった

https://ajito.fm/

ajito.fmのサイトを作製している先輩 @suzu_vに使っている技術を聴き選んだのが本当のところ.

Macユーザであれば Homebrew で簡単にインストールできる.
Viewのテンプレート(以下テーマ)も豊富なので手軽に始めるにはもってこいであった.

自分が利用したテーマは こちら パネルが並ぶようなデザインで見やすい.

使って見たメリットデメリットをあげてみよう

メリット

  1. テーマのおかげでデザインに関して悩むことはあまりない
  2. テーマがHugoに沿って作られているおかげでテーマからHugoの使い方がなんとなく学べる
  3. ドキュメントが手厚く書かれているのでハマりにくい
  4. ビルドインサーバですぐさまローカル環境を立てられる

デメリット

  1. テーマがいい感じにやってくれすぎて細かい設定し始めるとハマる
  2. なんで動いてるのか探しにくい
  3. Markdown前提だけど無理出てくるので結局html書き始める
  4. ルーティングの設定がわかりづらい

いい感じにやってくれる分, どこで設定されているのかやなぜそのファイルが生まれるのかわかりづらい部分がある.
慣れてくると何となく書けるようになってくるが慣れるまでイマイチ何で動いているのか分かりづらい.
この辺は自分が普段サーバサイドコードを書く人間だからかもしれない.

とはいえ, 入れて2週も経たないうちにそれっぽいサイトが作れた.
静的ページを作るのであれば強力な道具だと思う.
込み入ったことをせずサクッとやりたいならおすすめ.

静的ページ作る分にはエンジニアいらないんじゃね?と思わせる程度に手軽だった.


Vue.js

言わずと知れたjsライブラリ.

jp.vuejs.org

選定理由はとても単純で 業務で使用しているから である.
理由は2つある.

  • 慣れているので導入に心理的コストがない. かつサクッと動くもの作るのに最適
  • 業務でガッツリVueの昨日使っているわけではないので自分で試したい

scriptタグを書けばサクッと動くのはやはり使いやすかった.
いちいちビルドとかしたくない(というかやったことないので今もハマってる)

今回は2way-bindは使わないことにした. componentを利用した再利用しやすいパーツを作り各ヘッドホンごとに変更差分が少なくなるように意識した.
業務ではcomponentを利用したことがなかった(するほどでもない)ので発見が多かった.
思想もわかりやすいし, サードパーティライブラリも多い.
サクッと使いやすいのでおすすめ.

Github Pages

Githubが提供している静的ページホスティングサービス.

pages.github.com

結構有名らしく, これまた別の先輩に教えてもらい導入.
初めはAWS S3にあげようとしていたが, GithubPagesで全然間に合っている.

特徴としては, ズバリ GithubにあげたRepositoryをそのままホスティングしてくれること だと思う.
これめちゃくちゃ便利で, Githubgit push するだけで変更が適用されるのである.
(自分は使っていないが, ホスティングするブランチ分けることもできるのでprも使えると思われる)

使い方に関しては公式のドキュメントが丁寧なのでそこを参照してほしい.

音声共有サイトの活用

soundcloud という音声共有サイトを利用した.

soundcloud.com

結構優秀で試しに著作権のある音声をuploadしたところそのtrackは無効になった.
おそらく音声波形をみて判断しているのだろうが, 予想外に高機能で驚いた.

自分は著作権フリーやNo Copylight Songを利用するようにした.

まとめ

ということで, 技術的な側面に関してまとめた.
次回は録音環境や音声選定について書いていこう.

あと余力があればヘッドホンどうやって揃えたか, 今後どうやっていくかについて書く.