今回は当ブログのみなさんから見えてる画面(良い言葉が見つからなかったのでフロントと呼ぶことにする)の話でもしたいと思います。といっても実装の細かな話は長くなるのでしません。苦労した点とか工夫した点とか実装時の感想とかを交えて簡単に説明します。

1.全体の構成

 というわけでまずは全体の構成から。といっても見てのとおりですが、下のスクショのような構成で成り立っています。

 

①ヘッダー

 どのページを閲覧してても画面上部に固定表示されるメニュー的な奴ですね。今は「Home」と「Blog」しかコンテンツがなくて寂しいですが、まぁ気分次第で今後増えるかもしれません。

②メイン

 ブログの記事本体とか記事一覧とかが表示される部分です。たくさん記事を書いて一覧をにぎやかにさせたい。

③サイドバー

 ヘッダーはHP全体のメニューだったのに対して、サイドバーはブログに対するメニューですね。カテゴリとかアーカイブとか選択したらメイン部分に選択が反映されます。

④フッター

 どのページも最下部までスクロールすると現れます。一丁前にコピーライトを主張しており、文字をクリックするとHomeに飛びます。

 上記は当たり前のことしか説明してませんが、①と④は特筆すべきことがないので、②と③についてもう少し詳しく述べます。

2.サイドバーについて

2.1.プロフィール部

 

 プロフィール部は見ての通り、「アイコン」と「一言」と「各種アカウントID」から成り立っています。ここでAtCoderのアカウントIDがレートと共に着色表示されているのがわかるかと思いますが、これはAtCoderの公式サイトからJSON形式でレート情報をリアルタイムに取得し、レートをもとに条件分岐し、フォントカラーを指定している仕組みになっています1。早く青色になってほしいですね。

 アイコンの方はTwitterと同期しているわけではなく、別でサーバーにアップしています。ちなみにこのアイコンは某ネズミの国にいたカモ。

2.2.最新記事

 最新記事についてはその名の通り最新の記事を最大で5つ表示しています。投稿時刻をもとに記事DBを降順ソートし頭から5つ引っ張ってきてるだけです。ちなみに記事DBには下書きデータもあり、公開・非公開のstatusから下書きデータは省いています。これは記事一覧とか他についても同様。Railsにおいてはこの手のSQLクエリは全部Active Recordと呼ばれるRailsのORM機能によって、下記のような簡単な表記で実装できます。

## 全ての公開記事を投稿時刻をもとに降順で取得
def get_all_posts
  Blogposts.where(status: 1).order('published_at desc')
end

2.3.月別アーカイブ

 今はまだ2020年8月の記事しかないので大した役割を果たしていませんが、月毎の記事を見たい場合はこちらから選びます。実はこいつの実装が地味に厄介で、というのも投稿時刻をもとに月単位でDBを区切るのが若干めんどくさかったことに加えて、タイムゾーンがRubyとDBとで異なるという仕様のせいで、JST(日本標準時)とUTC(協定世界時)の補正に難儀しました。これがうまくいってないと、例えば2020年8月1日0時0分0秒の記事が2020年7月の記事扱いとなってズレてしまうといったことが生じます。最終的にはネットの力に頼りながらなんとかしました2

2.4.カテゴリ・タグ

 カテゴリごとに記事を見たいときとか、あるタグが貼られている記事を見たいときとかに使います。といってもカテゴリもタグも内部処理的には全く同じことをしていて、実はカテゴリも一つの記事に複数持つことができるようにしてあります。じゃあ結局カテゴリとタグの違いってなんなんだという感じですが、個人的にはカテゴリは大きなくくりで記事を分類、タグはとりあえず関係する単語全部貼り付けとけって感じで運用してます。カテゴリ・タグ機能の実装は「acts-as-taggable-on」という便利なgem3に頼りました。

3.メインについて

3.1.記事一覧

 サイドバーの選択に応じた記事の一覧が出てくるようになっています。一覧には各記事の「タイトル」「サムネイル」「本文の最初の方」「投稿時刻」が記載されており、「タイトル」あるいは「Read More>」をクリックすることで各記事ページに飛びます。サムネイルはデフォルトだとサイトロゴ(超手抜き)ですが、投稿画面から別のものを使ったり、アップロードしたりすることもできます。これについてはまた別の記事で。本文については一部だけ表示する形にしています。もう少しレイアウトを工夫したいと思っているところです。あと今は記事が少ないので表示されていませんが、たくさん記事があるとちゃんとページネーションされて、「次へ」とか数字番号で移動できるようになっています。ページネーションも色々なgemがあるようですが、今回は定番の「kaminari」を使いました。4

3.2.記事ページ

 記事ページはまぁ見ての通りで、普通に記事DBからURLと一致する記事を取得して表示させているだけです。記事最下部にて、公開時刻基準で前後の記事を取得・表示していて飛べるようになっています。あと、Twitterの共有ボタンもあるので、そちらを押すと共有ができるようになっています。

 ちなみに当サイトのブログ記事、全部markdownで書けるようにバックエンドの方で工夫していて、上でもチラ見せしましたが、シンタックスハイライトを適用したソースコードを貼り付けられるようにしました。

#include <stdio.h>

int main(void){
    printf("Hello, World!\n");
    return 0;
}

 詳しいことはまた別記事で紹介したいと思いますが、やはりプログラミングのことも投稿するからには、この機能は必須でしたね。

4.今後について

 というわけで今回はブログのフロント部分の話でした。「コメント機能」や「人気記事」、「検索機能」といった一般的なブログサービスに搭載してある機能でまだ実装していないものもあります。ただアクセス数が非常に少ないのに人気記事もクソもあるかといった感じでコメント機能を付けたところできっと誰もコメントしない、検索機能が必要なほど記事もない、と今は寂しい状況なので、しばらくは・・・。それよりも見やすい記事の書き方とか美しいデザイン・レイアウトとかそういうのを学んだ方が良い気が。次回以降、管理画面とかバックエンドの話もしたいと思います。


  1. 普通に400で割った商に対応した配列を用意すればいいのに、俺はif文を9つ書いたぜ(未参加の黒色含)。なんのためにアルゴリズムの勉強をしたのか。 

  2. こちらの記事を参考にしました。 https://qiita.com/aosho235/items/a31b895ce46ee5d3b444 

  3. https://github.com/mbleigh/acts-as-taggable-on 

  4. https://github.com/kaminari/kaminari