mixi Developer Center (ミクシィ デベロッパーセンター)

mixi Connect

mixi Connect » mixi Plugin » mixiチェック » 技術仕様

技術仕様

mixiチェックボタンの設置方法は簡単です。数行の HTML を追加するだけです。

チェックボタン用HTML発行フォームをお使いください。

ただし、効果的に設置するためにはいくつかのポイントがあります。
設置のポイントに関しては、「mixi Plugin 実装のポイント」をご確認ください。

mixiチェックボタンの設置（PC 向け）

mixiチェックボタンの設置（PC 向け）

    <a href="https://mixi.jp/share.pl" class="mixi-check-button" data-key="...">mixiチェック</a>
    <script type="text/javascript" src="https://static.mixi.jp/js/share.js"></script>

a 要素と script 要素には、それぞれ以下の属性を指定できます。

a 要素：

属性説明備考
href "https://mixi.jp/share.pl" を指定します 必須
class "mixi-check-button" を指定します 必須
data-key mixiチェックキーを指定します (*1) (*2)
data-url mixiチェック対象ページの URL を指定します (*3)(*4)(*5) (*6)
data-button mixiチェックボタンの種類を指定します(*7) (*8)
data-text ポップアップウィンドウのコメント入力フォームにあらかじめ入力しておきたい文字列を指定します(*9) (*10)
data-show-count "true" もしくは "false" を指定します(*11) (*12)

(*1) mixiチェックキーは、登録時に発行されるものをお使いください。
(*2) 省略可能です。その場合、「...をチェックしました」という定型文は指定できません。また「Partner Dashboard」にてサービス利用状況を確認することもできません。
(*3) 認証や IP 帯域によるアクセス制限のないものを指定してください。
(*4) スマートフォン向けページにボタンを設置する場合でも、PC 向けページの URL を指定してください。
(*5) 日本語などのマルチバイト文字を含む場合は UTF-8 で URL エンコードしたものを指定してください。
(*6) 省略可能です。その場合、そのページの URL が使われます。
(*7) "button-1″～"button-6″ のいずれかを指定します。なお、サイトのレイアウト上、やむを得ず異なるデザインの画像を使用したい場合は、別の方法 で実装することが可能です。
(*8) 省略可能です。その場合、デフォルトのボタンが使われます。
(*9) 日本語などのマルチバイト文字を含む場合は UTF-8 で URL エンコードしたものを指定してください。
(*10) 省略可能です。その場合、コメント入力フォームには何も入力されません。
(*11) "true" を指定するとチェックボタンの右にチェックされた数を表示することができます。
(*12) 省略可能です。その場合、チェックボタンのみの表示となります。

　　　　　　　　　　　

button-1button-2button-3button-4button-5button-6

script 要素：

属性説明備考
src "https://static.mixi.jp/js/share.js" を指定します 必須
type "text/javascript" を指定します 必須

ひとつのページに複数のボタンを設置する場合、ボタンを配置するそれぞれの位置に a 要素を置き、最後の a 要素の直後 に script 要素をひとつだけ置いてください。

URL許可リスト

mixiチェックで送信するURLは画像のURLも含め、すべて "URL 許可リスト" で許可されている必要があります。
ここで許可されていない URL が送信された場合::

  • チェック対象のページの URL が許可されていない場合、エラーになります。
  • 画像の URL が許可されていない場合、その画像は無視されます。

"URL 許可リスト" は Partner Dashboard のサービス登録画面から設定可能です。

mixiチェック対象ページ情報の指定方法

mixiチェック対象ページの HTML にいくつかのタグ（HTML 要素）を追加することで、mixiチェックのタイトルや説明文、サムネイル画像などを指定することができます。

mixiチェックボタンを設置しているページと、mixiチェック対象ページの URL が異なる場合、ここで説明されている HTML 要素は、mixiチェック対象ページの HTML に記述してください。

また、mixiチェックは The Open Graph protocol [OGP] にも対応しています。mixiチェック対象ページに記述された The Open Graph protocol の情報は適切に解釈されます。

名前空間の宣言

html 要素の xmlns 属性で、次の名前空間を宣言してください。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">

"xmlns:og" は The Open Graph protocol の名前空間、"xmlns:mixi" が mixi の名前空間になります。

チェックのタイトル、本文を指定する

mixiチェックに登録するタイトルと本文を指定するには、mixiチェック対象ページの head 要素内に、以下のような meta 要素を記述します。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      <title>...</title>
      <meta property="og:title" content="..." />
      <meta property="og:description" content="..." />

タイトルの指定には、以下のルールがあります。

1. property 属性が "mixi:title" の meta 要素があれば、その content 属性が使われます
2. 1. がない場合、property 属性が "og:title" の meta 要素があれば、その content 属性が使われます
3. 2. がない場合、name属性が "title" の meta 要素があれば、その content 属性が使われます
4. 3. がない場合、title 要素があれば、その内容が使われます
5. 4. まで来ても、タイトルが指定されていない場合は、チェックする対象のURLのドメインが使われます

また、本文の指定には、以下のルールがあります。

1. property 属性が "mixi:description" の meta 要素があれば、その content 属性が使われます
2. 1. がない場合、property 属性が "og:description" の meta 要素があれば、その content 属性が使われます
3. 2. がない場合、name 属性が "description" の meta 要素があれば、その content 属性が使われます
4. 3. まで来ても、本文が指定されていない場合は、本文がない状態で登録されます

つまり、title 要素と <meta name="description" content="..." /> が指定されているページや、The Open Graph Protocol に対応しているサイトであれば、タイトルと本文については特に何も変更する必要はありません。

18 歳未満非対応ページの指定

18 歳未満非対応ページの場合は、以下の meta タグを追加してください。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      <title>...</title>
      <meta property="mixi:content-rating" content="1" />
      ...

18 歳未満非対応ページの場合、18 歳未満の mixi ユーザの使用に制限が課せられます。

PC 以外のデバイスに対応した別の URL を指定する

PC 以外のデバイス（スマートフォン、携帯電話）向けに別のページが存在する場合は、それらを<link> 要素で指定することができます。

  • rel 属性に "mixi-check-alternate" を指定します。
  • type 属性に "text/html" を指定します。
  • media 属性に対応するデバイスの種類を指定します（後述）。
  • href 属性に各ページの URL を指定します。

media 属性に指定できる値は以下の通りです。

media 属性対応するデバイスの種類
mixi-device-smartphone スマートフォン
mixi-device-mobile 携帯電話（すべてのキャリア）
mixi-device-docomo 携帯電話（DoCoMo）
mixi-device-au 携帯電話（au）
mixi-device-softbank 携帯電話（Softbank）

スマートフォンについては、以下のルールがあります。

  • mixi-device-smartphone が省略された場合、mixiチェック対象ページの URL が使われます。

携帯電話については、以下のルールがあります。

  • "mixi-device-docomo" が省略された場合、"mixi-device-mobile" があれば、そちらが使われます。
  • "mixi-device-au" が省略された場合、"mixi-device-mobile" があれば、そちらが使われます。
  • "mixi-device-softbank" が省略された場合、"mixi-device-mobile" があれば、そちらが使われます。
  • "mixi-device-mobile" も省略された場合、mixiチェック対象ページを携帯電話向けに自動変換したページが表示されます。

たとえば、以下のように記述します。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <link rel="mixi-check-alternate" media="mixi-device-mobile"
            type="text/html"
            href="http://example.com/mobile/index.html" />
      <link rel="mixi-check-alternate" media="mixi-device-docomo"
            type="text/html"
            href="http://example.com/docomo/index.html" />

この例の場合、DoCoMo の携帯電話では "http://example.com/docomo/index.html" が、それ以外の携帯電話では "http://example.com/mobile/index.html" が使われます。

あるいは、対応デバイスを meta 要素で指定することも可能です。その場合、property 属性に以下のものを指定可能です。

property 属性対応するデバイスの種類
mixi:device-smartphone スマートフォン
mixi:device-mobile 携帯電話（すべてのキャリア）
mixi:device-docomo 携帯電話（DoCoMo）
mixi:device-au 携帯電話（au）
mixi:device-softbank 携帯電話（Softbank）

content 属性に各ページの URL を指定します。上の例を meta 要素で書き直すと以下のようになります。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <meta property="mixi:device-mobile" content="http://example.com/mobile/index.html" />
      <meta property="mixi:device-docomo" content="http://example.com/docomo/index.html" />

サムネイル画像を指定する

mixiチェックで表示されるサムネイル画像を link 要素で指定することができます。
指定する画像はmixiチェック対象ページのコンテンツに関連する画像を指定するようにしてください。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <link rel="mixi-check-image" type="image/jpeg"
            href="http://example.com/images/sample.jpg" />
      <link rel="mixi-check-image" type="image/jpeg"
            href="http://example.com/images/mobile.jpg" />
属性名説明備考
rel "mixi-check-image" を指定します。 必須
type 画像フォーマットに対応した MIME タイプを指定します。
たとえば、JPEG の場合は image/jpeg を指定します。
href 画像の URL を指定します。 必須

あるいは、meta 要素で指定することも可能です。その場合は、property 属性に The Open Graph protocol の
"og:image" または mixi 独自の "mixi:image" を使い、content 属性に画像の URL を指定します。

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <meta property="og:image" content="http://example.com/images/sample1.jpg" />
      <meta property="mixi:image" content="http://example.com/images/sample2.jpg" />
      <meta property="mixi:image" content="http://example.com/images/sample3.jpg" />

画像が複数枚指定されている場合、mixiチェック投稿画面で選択候補として表示され、ユーザが
好みの画像を選択できるようになります。

サムネイル画像の制限事項および注意事項

  • サムネイル画像として指定できる画像の枚数は 5 枚までです。
  • 画像フォーマットは JPEG, PNG, GIF（アニメーション GIF 除く）に対応しています。
  • 画像の容量が 400 KB を超える画像は無視されます。
  • 画像の容量が 1 KB 未満の画像は無視されます。
  • 画像の大きさが幅 76 ピクセル、高さ 76 ピクセル以下のものは無視されます。
  • 画像の大きさは幅 180 ピクセル、高さ 180 ピクセル以上を推奨します。

mixiチェックに提供しない情報を指定する

上記の meta, link 要素で明示的に指定されていない場合も、ページの HTML からタイトルや説明文、画像を自動的に取得するようになっています。

もし、これらの情報を取得されたくない場合は、name 属性が "mixi-check-robots" の meta 要素を記述することで、各情報の取得を禁止することができます。

    <html>
    <head>
      <title>...</title>
      <meta name="mixi-check-robots" CONTENT="notitle, nodescription, noimage">
    </head>
  • name 属性には "mixi-check-robots" を指定します。
  • content 属性には、次の表にある値をカンマ区切りで指定します。
値説明
notitle タイトルの自動取得を禁止します。
nodescription 説明文の自動取得を禁止します。
noimage 画像の自動取得を禁止します。

投稿画面 URL の仕様

JavaScript を埋め込めないページや Flash から利用する場合など、以下の URL を開くことで mixiチェックの投稿画面を表示することができます。

    https://mixi.jp/share.pl?u=<data-url>&k=<data-key>

share.jsを使用せずにmixiチェックボタンを設置する際は、
以下のタグを用いて設置すれば簡単に、投稿用のウィンドウをポップアップさせ、チェックボタンが設置されているページから離脱することなくユーザーに投稿していただくことができます。

<a href="javascript:void(0);" onclick="window.open('https://mixi.jp/share.pl?u=<check_url>&k=<check_key>','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">mixiチェック</a>

※ location=yesを必ず付け、ユーザに対してロケーションバーの表示を必ず行い、ユーザにmixi.jpの画面であることが確認できる様にしてください。

ボタンの画像は原則として「mixiチェックボタン」素材をご利用ください。なお、サイトのレイアウト上やむを得ない場合、「アイコン」素材をご利用頂くことも可能です。いずれの場合も、「mixi Platform用素材利用ガイドライン」をご確認の上でご利用ください。

コンテンツを取得するときの "User-Agent" HTTP ヘッダー・フィールド

mixi のサーバから外部コンテンツを取得するときの "User-Agent" HTTP ヘッダー・フィールドは以下のものになります。

    mixi-check/1.0 (http://mixi.jp/)

product-version (現在は "1.0″) と comment（現在は "(http://mixi.jp/)"）は将来的に変更される可能性があります。

[MIXI-DEV-BOARD]

mixi Partner Dashboard

https://sap.mixi.jp/

[OGP]

The Open Graph protocol

http://opengraphprotocol.org/

mixiからの遷移時のパラメータについて

投稿されたチェックを通じてユーザーが、外部サイトに遷移する際に
mixiからの遷移が分かるように下記パラメータが付与されて遷移します。

パラメータ名値
__from mixi

例

http://example.com/index.html?__from=mixi

このページの上部へ

©MIXI