Ameba Ownd Google フォーム スマホ対応

経緯

とある団体のホームページを作りたい、と頼まれる
要件は以下。

• お金はかけたくない
• 記事を更新したいが、HTMLなどの知識はない
• 未来永劫 私が更新するわけにはいかない

初期構築だけやり、更新できる状態にして引き渡しをしよう
と数ある無料のホームページ作成サービスから選んだのが Ameba Ownd。

ページ構成を適当に作って依頼者に確認したところ
「お問い合わせ機能が欲しい」とのこと。
メールアドレスだけ貼りつけたがフォームが良いとおっしゃるので
問い合わせフォーム付けようと思ったが
Ameba Ownd には問い合わせフォームがなく
ヘルプにも外部のサービスから埋め込んでね とある

団体は gmail を持っていたこと、
会員登録するサービスはない方がよかろう
と選んだのが Google フォーム。

で埋め込んだら 本事象に遭遇した、というわけだ。

Ameba Ownd で 問い合わせフォームを作る方法

Ameba Ownd で紹介されている方法は 以下。

・フォームやカレンダーやアフィリエイトタグが貼れるようになりました
・サイトにお問い合わせフォームを設置する

手順に沿って 解説をすすめる

①Google フォーム作成

まずは 埋め込むフォームを作成する
Googleフォームは gmail.com のメールアドレスをもっていれば利用可能。
URLにアクセス > https://docs.google.com/forms/

とくに難しいことはない
Googleで 「google フォーム 作り方」等検索すれば
詳細の手順が紹介されたサイトは すぐに見つかる

②Google フォーム URLを取得

フォーム作成後、右上の「送信」から
別サイトへ貼り付けるURLが取得できる

③Ameba Ownd > HTMLブロックに貼り付け

Ameba Ownd > ページの編集 から
問い合わせフォームを貼りつけたいページを開き、
HTMLブロックをフォームを表示した場所に配置する

Google Form で 外部サイトに設置するためのHTMLを
HTMLブロックへ貼り付ける

④レスポンシブ対応

レスポンシブとは、PCやスマホなど表示する媒体
ブラウザのサイズによって 表示形式を変える方法。
サーバーとのやりとりなく クライアント側で表示が切り替えられる

簡単なのが CSS を使った方法。
Ameba Owndでは デザインがテンプレのまま使われるため
HTML側の記述を修正することはできないが
「CSS カスタマイズ」という機能が存在しており
自サイトのstyleを独自で指定することが出来る

<style charset="UTF-8">
.pc_form {display: block !important;}
.sp_form {display: none; !important;}

@media only screen and (max-width: 750px) {
.pc_form { display: none !important; }
.sp_form { display: block !important; }
}
</style>

@media only～ の記述は ブラウザの幅が 750px 以下になったら
このstyleで表示しますよー というもの。

上記のstyleでは、通常(幅 750pxより大きい状態)は class=”pc_form” を表示し
幅 750px以下になったら class=”sp_form” を表示しますよ、になる

これに合わせ HTMLは以下のように記述しておけば OK.. のはずだった
が、この class=”pc_form” や “sp_form” が全く反応してくれなかった

<div class="pc_form">
 <iframe
  src="https://docs.google.com/forms/***/viewform?embedded=true"
  width="640" height="939"
  frameborder="0" marginheight="0" marginwidth="0">
  読み込んでいます...
 </iframe>
</div>
<div class="sp_form">
 <iframe
  src="https://docs.google.com/forms/***/viewform?embedded=true" 
  width="350" height="939"
  frameborder="0" marginheight="0" marginwidth="0">
  読み込んでいます...
 </iframe>
</div>

なぜ style が適用されなかったか

ポイントは Ameba Ownd の仕様にある。
Ameba Ownd で 指定した HTMLブロックは <iframe /> で作成されるため
である。

<iframe />とは、タグでくくられた箇所は
表示しているページとは 別で表示しているページ、
となるため、表示しているページで指定した style は
<iframe />内には 適用されないのである

iframe内で 有効になる style を宣言するには

HTMLブロックのコード内に style を記述すれば良い。
答えは 前ページ 「解消方法」記載のコード。

<style charset="UTF-8">
.pc_form {display: block !important;}
.sp_form {display: none; !important;}

@media only screen and (max-width: 750px) {
.pc_form { display: none !important; }
.sp_form { display: block !important; }
}
</style>
<div class="pc_form">
 <!-- Google フォームで 指定されたHTML を記述 -->
 <iframe src="https://docs.google.com/forms/***/viewform?embedded=true" width="640" height="939" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます...</iframe>
</div>
<div class="sp_form">
 <!-- Google フォームで 指定されたHTML を記述 # widthは スマホ用に # -->
 <iframe src="https://docs.google.com/forms/***/viewform?embedded=true" width="350" height="939" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます...</iframe>
</div>

あとがき

レスポンシブなんて瞬殺だぜ！とやったものの
iframeが使われているところに気づくまで 2時間。
時間 無駄にした.. と思うが、
プログラム組んでいればよくあることだったりする
出来たから よしとしよう。

参考

本記事記載の実践にあたり、参考にさせていただいたサイトは以下。

【レスポンシブ】PCとスマホで違う画像に切り替える方法！CSSだけで簡単画像切り替え！

更新履歴

2019.02.27 Wed > 全面リライト