# Railsでコメント機能を作ってVuePressにiframeで表示してみた

2020/02/17

vuepressで作ったこのブログにコメント機能を実装しました。Railsで。iframeで。その作業メモ。

# 静的ファイルジェネレータでコメントのCRUDをやりたい

ブログと言ったらコメント機能ほしいじゃないですか。たとえ誰からもコメントが来なくても。

ただこのブログは静的ファイルジェネレータVuePressで作成しています。動的にコンテンツを作成したり表示することができません。さぁどうするか。

# Railsで作ってiframeで埋め込めばいいじゃない

なのでコメントのCRUD操作を行うアプリケーションをRailsで自作しました。それをiframeでVuePressに埋め込みました。

リポジトリはここ！

serotoninpower_cms (opens new window)

コメントのCRUDとその管理画面があるだけの超単純なアプリケーションです。herokuの無料プランで動かしています。ドメインすら取得していない。

一番面倒だったのはiframe絡みのHTTPヘッダやCookieのセキュリティ設定。「あれ面倒じゃね？」って思ったときに引き返しておけばよかった。

# iframeを埋め込むVueコンポーネントを作ってVuePressで使う

こんなコンポーネントを作りました。

.vuepress/components/Comments.vue

// Comments.vue
<template>
  <iframe
    id="comentFrame"
    v-bind:src="get_ifram_src_url"
    frameborder="0"
    height="800px"
    width="100%"
    >
    コメントを表示するには iframe 機能を有効にして下さい
  </iframe>
</template>
<script>
export default {
  computed: {
    get_ifram_src_url: function() {
      const url =
        'https://serotoninpower-cms.herokuapp.com/posts/' +
        this.$page.regularPath.split('/').slice(-2)[0] +
        '/comments/wrapper';
      return url;
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

悲しいのがiframeの高さをコンテンツに合わせて自動調整できないこと。height="800px"で決め打ちです。

親コンテンツのJavaScriptで、埋め込んだiframeのDOMにアクセスしないと、そもそもiframeの高さを取得できないので、それってどうなのってことでやめました。

iframeはやめておいた方がいい。

# 結論

静的ファイルジェネレータやめよう。Nuxt.js(SSR) + Rails(APIモード)で作ろう。
どうしても静的ファイルジェネレータを使いたいならdisqus (opens new window)みたいなSaas使おう。

負債を増やしてしまった気がしますが、自分ひとりで初めてRailsアプリをデプロイまでやれたからまぁよかったかな。。。

# おまけ: Comment Sandbox

好き勝手コメントを投稿できるページを作りました。

コメントする

name

content