iframeによるページの連携

 

当農園のウェブ連携図
当農園のウェブ連携図

 

当農園では2つのフロントページを役割別に用意しています。当ブログは農園立上げまでのプロセスを記載するためのいわば貯蔵庫及び農園の最新情報の報告ツールとして位置づけています。仕様としてはさくらのレンタルサーバーhttps://www.sakura.ne.jp/でドメイン取得、サーバー契約やDBを準備し、WordPressでブログを用意しています。インストールもとても簡単ですぐにブログを開始することができました。

そして、もう一つのフロント機能として農園紹介及び予約システムとしてのウェブサイトを準備しています。こちらはペライチ https://peraichi.co.jp/を使って作成しています。テンプレートが多数用意されているし、htmlなどのコードをほぼ書かなくても必要十分なウェブサイトが手軽に作れるツールです。当農園のウェブサイトはhttps://peraichi.com/landing_pages/view/blueberryになりますので遊びに来てください。

さて、技術的にいろいろ調べたのが、ブログの方が更新頻度が高いのでペライチのページでもブログ情報を連携することで、どちらに来ていただいたお客様にも最新情報を確認してもらえるようにしたい、と思い手法を検索しました。そこで分かったのがiframeというタグを用いることで連携ができるということ。ペライチは有償のプレミア契約をするとhtmlを挿入することができるのでそこにiframeタグを入れることで実現できました。

ただ、普通に入れるとうまく動きませんでした。というのもペライチはhttpsで運用されているため、連携先も形式をhttpsに合わせる必要があるということ。wordpressのブログはhttpでの運用としていたので、SSL設定する必要が出てきました。

どうやってSSL設定するの?と謎だったのですがさくらのレンタルサーバーではwordpress用にSSLプラグインが用意されていて、その手順に沿って行えば問題なく行えました。参考ページはhttps://help.sakura.ad.jp/hc/ja/articles/115000047641こちらになります。

iframeをどう設定するかについては、https://abhp.net/hp/HP_HTML_550000.htmlこちらのページが参考になりました。

これでブログがSSL化でき、無事にペライチからも見られるようになりました。自分で手を動かしてみるのはウェブの勉強になりますね。

 

おたけ

ブルーベリー農園を実家の千葉県で2020年オープン目指し父親、叔父と共に準備中です。大粒で甘い完熟ブルーベリーを土汚れがない快適な環境でご提供します。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする