投稿日: 投稿者: Daisuke

Google reCAPTCHAを導入する Part2 ～HTML5でエラー出てるじゃん！編～

Google I/O 2013、次々と発表がありますね。個人的に「Play Music All Access」とかが気になりますが。

まあそんなことはどうでもいいとして、前回の続きから行きましょう。

問題発生！

では、前回作成したテストページをHTMLの策定団体であるW3CのMarkup Validation Service（マークアップ検証サービス）にかけてみましょう！
ページのURLを入れて、Checkをクリックするだけです。

W3C Markup Validatorのエラー画面

なんと、Google先生の言うことを鵜呑みにしてしまったので1つのエラーと1つの警告が発生しました。

ちなみに、警告の方はHTML5文章として間違っていないページでも発生します。

Using experimental feature

つまり、実験的な機能を使っているということですので、これは無視してかまいません。

しかし、エラーの方は見逃せません。これこそ、この記事の本題です。

The frameborder attribute on the iframe element is obsolete. Use CSS instead.

これを訳すと「iframe要素のframeborder属性はもはや使われません。代わりにCSSを使用してください。」ということです。

いやいや、そんなコード打った覚えないんですよ。つまり、ライブラリが出力した行のようですね。うわっ、メンド…

仕方ないので調べました…

Google先生にウソを教えるなと詰め寄ったところ、Google Developers Docsに答えがありました。”Displaying reCAPTCHA Without Plugins“というページですが、結局は「表示にライブラリを使わなければOK！」なんです。

なんだ、フォーム側にPHPいらないじゃん！

<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k={公開鍵}"></script>
<noscript>
	<iframe src="https://www.google.com/recaptcha/api/noscript?k={公開鍵}" height="300" width="500"></iframe><br/>
	<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
	<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

{公開鍵}を自分の公開鍵で置き換えてもらって

から

の間に貼りつければ受け取り側のスクリプトに変更は必要ありません。

つまり、form.phpはこうなります。いや、form.htmlか。

<!DOCTYPE HTML>
<html>
<body>
<!--ほかのコンテンツ-->
<form action="recieve.php">
    <!--ほかのフォーム要素-->
    <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k={公開鍵}"></script>
    <noscript>
        <iframe src="https://www.google.com/recaptcha/api/noscript?k={公開鍵}" height="300" width="500"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>
    <!--ほかのフォーム要素-->
</form>
<!--ほかのコンテンツ-->
</body>
</html>

今回はreCAPTCHAの送信フォーム側はPHPを使わずに書いた方が処理も速いし、HTML5対応が簡単というオチでしたとさ。

最後にちょっとカスタマイズ

<script type="text/javascript">var RecaptchaOptions = {theme : 'white'}</script>

このコードを追加して、

<!DOCTYPE HTML>
<html>
<body>
<!--ほかのコンテンツ-->
<form action="recieve.php">
    <!--ほかのフォーム要素-->
    <script type="text/javascript">var RecaptchaOptions = {theme : 'white'}</script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k={公開鍵}"></script>;
    <noscript>
        <iframe src="https://www.google.com/recaptcha/api/noscript?k={公開鍵}" height="300" width="500"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>
    <!--ほかのフォーム要素-->
</form>
<!--ほかのコンテンツ-->
</body>
</html>

こういうカンジに書くと、フォームのテーマカラーが変わります。’white’以外にも、’red’（既定）や’blackglass’、’clean’がありますのでサイトのデザインに合った色を探してみてくださいね！
※カスタムデザインを利用する方法もあります。詳細はGoogle公式ドキュメント(英語)をご覧ください。

では！

コメントを残す

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