reCAPTCHA のデザインをカスタマイズする

重要: reCAPTCHA API のバージョン 1.0 のサポートは終了しました。バージョン 2.0 にアップグレードしてください。詳細

reCAPTCHA をサイトにインストールした後、表示形式を変更できます。このページでは、（1）標準の reCAPTCHA テーマのいずれかを選択する方法、（2）reCAPTCHA の外観を完全にカスタマイズする方法、（3）ウィジェットの言語を変更して reCAPTCHA を多言語化する方法について説明します。

標準テーマ

reCAPTCHA ウィジェットに別のテーマを表示するには、まず、メインの HTML ページの、reCAPTCHA が表示される <form> 要素の前に次のコードを追加する必要があります（reCAPTCHA が最初に呼び出されるメイン スクリプトの後に配置すると機能しません）。

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

標準のテーマを使用するには、'theme_name' を次の 4 つのテーマ名のいずれかに置き換える必要があります。

「red」（デフォルトのテーマ）	「白」
「ブラックグラス」	「クリーン」

カスタムテーマ設定

カスタムテーマ設定により、reCAPTCHA 画像の表示方法を正確に制御できます。（こちらはカスタムテーマ設定のデモです）。カスタムテーマ設定を使用するには、まず RecaptchaOptions のテーマ プロパティを「custom」に設定する必要があります。これにより、独自のユーザー インターフェースを作成しないように reCAPTCHA に指示できます。reCAPTCHA は、次の ID を持つ HTML 要素の存在に基づいて、CAPTCHA をユーザーに表示します。

• ID recaptcha_image の空の div。ここに実際の画像が配置されます。div は 300x57 ピクセルになります。
• ID と名前の両方が recaptcha_response_field に設定されたテキスト入力。ここにユーザーは回答を入力できます。
• reCAPTCHA ウィジェット全体を含む div（省略可）。この ID の div を custom_theme_widget に配置し、div のスタイルを display:none に設定する必要があります。reCAPTCHA テーマ設定コードが完全に読み込まれると、div が表示されるようになります。この要素を使用すると、読み込み時にページのちらつきが発生しないようにできます。

このすべてを実装するには、まずメインの HTML ページの、reCAPTCHA が表示される <form> 要素の前に次のコードを配置します。

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

次に、reCAPTCHA を表示する <form> 要素内に次の要素を配置します。

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

最後の数行は、このガイドの最初に説明した reCAPTCHA を表示する標準的な方法です。

上記のコードで何が起きているかをご説明します。Recaptcha JavaScript オブジェクトには、CAPTCHA の状態を変更できるメソッドが用意されています。reload メソッドで、新しい CAPTCHA チャレンジを表示し、switch_type メソッドで、画像と音声の CAPTCHA を切り替えます。reCAPTCHA の完全な UI を作成するには、CAPTCHA の状態によって異なる情報が表示されます。たとえば、ユーザーが画像のキャプチャを表示している場合は、「音声キャプチャを取得」へのリンクが表示されます。ステートフル UI の作成に使用できる 4 つの CSS クラスがあります。

CSS クラス	次の場合に表示...
recaptcha_only_if_image	キャプチャ画像が表示されている
recaptcha_only_if_audio	音声によるキャプチャが表示されている
recaptcha_only_if_incorrect_sol	前の解答は不正解
recaptcha_only_if_no_incorrect_sol	前の解答は不正確でなかった

テーマ設定には多くのオプションがありますが、ユーザー インターフェースの一貫性ルールに従う必要があります。

• CAPTCHA ウィジェットの近くで reCAPTCHA を使用していることを伝えてください。
• 再読み込み関数を呼び出すボタンを表示する必要があります。
• 目の不自由なユーザーが音声キャプチャにアクセスできるようにする必要があります。
• reCAPTCHA ウィジェットでボタンとして使用する画像には、代替テキストを提供する必要があります。

国際化: ウィジェットの言語の変更

reCAPTCHA ウィジェットを国際化する方法は 2 つあります。

組み込みの翻訳機能

reCAPTCHA にはさまざまな翻訳機能が組み込まれています。これらを使用するには、RecaptchaOptions の lang パラメータを設定します。

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

カスタム翻訳

お使いの言語の翻訳がない場合は、独自に作成できます。reCAPTCHA JavaScript のすべての文字列を翻訳し、recaptchaOptions の「custom_translations」変数を設定する必要があります。設定していない文字列は、ご使用の言語のデフォルトの翻訳から取得されます。これを使用して、デフォルトの翻訳の一部のみをオーバーライドできます（選択した翻訳が地域に合わない場合など）。例:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

カスタム イタリア語翻訳の有効な例を次に示します（reCAPTCHA を呼び出す前に次のコードを配置してください）。

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

recaptchaOptions リファレンス

RecaptchaOptions ディクショナリには、次のフィールドを設定できます。

キー	有効な値	デフォルト値	意味
テーマ	'赤' | '白' | 'ブラックグラス' | 'クリーン' | 'カスタム'	「red」	reCAPTCHA に使用するテーマを定義します。赤、白、ブラックグラス、クリーンのテーマは、reCAPTCHA のユーザー インターフェースに用意されている事前定義のテーマです。カスタムテーマでは、reCAPTCHA の外観を完全に制御できます。
lang	サポートされている任意の言語コード。	「en」	事前定義のテーマのインターフェースで使用される言語。次の言語がサポートされています。 言語 コード 英語 en オランダ語 nl フランス語 fr ドイツ語 de ポルトガル語 pt ロシア語 ru スペイン語 es トルコ tr サイトの言語がサポートされていない場合は、いつでもカスタムテーマ設定を使用して、お客様の言語で reCAPTCHA を表示できます。
custom_translations	翻訳辞書	null	reCAPTCHA 文字列のカスタム翻訳を指定する場合に使用します。
custom_theme_widget	DOM 要素の ID を示す文字列	null	カスタムテーマ設定を使用する場合、これはウィジェットを含む div 要素です。使用方法については、カスタムテーマ設定のセクションをご覧ください。
tabindex	任意の整数	0	reCAPTCHA テキスト ボックスの tabindex を設定します。フォームの他の要素で tabindex を使用する場合は、ユーザーが移動しやすくなるように値を設定する必要があります。

たとえば、次の script タグは、reCAPTCHA のテーマをホワイトにし、tabindex 2 を持たせています。

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>