タグ: API

Instagram APIの利用基準が審査基準とともに変更。instafeed.jsをサンドボックスモードで対応

アナウンスでは既存のアプリはサンドボックスモードに移行され、可能な範囲内で利用できるとのことですが、実際にはサイトで使用していたInstafeed.jsなど停止してしまったものものあり、規約的にも事実上は一旦停止となる場合が多いように思われます。

2016/06/01Instagram APIの利用基準が審査基準とともに変更

制限なしに（変更による利用方法の可否は別途）Instagram APIを使用するには審査を申し込み承認を受けたのちは、ユーザーからの認証を受けるだけで使用可能とのこと。

Instagram Developer Documentation
https://www.instagram.com/developer/

Instagram Platform and documentation update. Apps created on or after Nov 17, 2015 will start in Sandbox Mode and function on newly updated API rate-limits and behaviors. Prior to going Live, and being able to be used by people other than the developers of the app, these apps will have to go through a new review process. Please read the API documentation or the Change Log for more details.

Any app created before Nov 17, 2015 will continue to function until June 1, 2016. On that date, the app will automatically be moved to Sandbox Mode if it wasn’t approved through the review process. The previous version of our documentation is still availablehere.

審査の申請方法

instagram API使用審査の申請方法
ermissions ReviewでInstagramアプリケーションの目的（権限）を選択
  1. Manage Clientに行き、審査を受けるアプリケーションのEditをクリック。
  2. アプリケーションを登録時に入力したDetailの中の情報を確認。
  3. Permissionsで「Start a submission」をクリック（上図）。
  4. Permissions Reviewでアプリケーションの目的（権限）を選択（上図）。
  5. 使用可能な目的であれば、さらに表示された内容を記入し「Submit」。

これで申請完了ですが、今回、この「アプリケーションの目的（権限）」がちょっと問題。

ハッシュタグで投稿を拾えなかったり自分の投稿についても制限があり、厳しい感じの審査基準になっています。
広告に注力しているInstagramですから、よりメディア寄りな印象も感じます。

API使用申請を行う理由を選ぶのですが、下記のものは申請不可。

  • ・I want to install a third party widget to show Instagram content on my website.
    //サードパーティ製のウィジェットの制作仕様
  • ・I want to display hashtag content and public content on my website.
    //ウェブサイト上でハッシュタグのコンテンツとパブリックコンテンツを表示
  • ・I want to display my Instagram posts on my website.
    //自分のInstagramの投稿を表示
  • ・I want to build analytics for my own Instagram account.
    //自分のInstagramのアカウントの分析
  • ・My app is still in development and/or is a test app.
    //テスト、開発段階のアプリ
  • ・My app allows non-business users to login and post comments, likes or follow actions.
    //非ビジネスユーザーがログインし、コメント、LikeやFollorする
  • ・Other
    //承認されたユースケースのいずれにも該当しない統合

審査を申請できるのは以下。

  • ・My app allows people to login with Instagram and share their own content.
    //人々がInstagramのでログインし、独自のコンテンツを共有する。
  • ・My product helps brands and advertisers understand, manage their audience and media rights.
    //ブランドや広告主が、理解視聴者やメディアの権利を管理する。
  • ・My product helps broadcasters and publishers discover content, get digital rights to media, and share media with
    //メディアにデジタル著作権を取得、メディアを共有、放送局や出版社を発見コンテンツを助ける。

また、アプリ開設用のビデオスクリーンキャストも必須のようです。

Permissions Review • Instagram Developer Documentation（審査詳細について）
https://www.instagram.com/developer/review/

制限はあるものの自分の投稿を管理サイトで表示させるなど、サンドボックスモードで一部対応も可能な使用方法もあり、Instafeed.jsなどもこのサンドボックスモードで一部対応は可能でした。

サンドボックスモードでのInstafeed.jsの設定方法

2016/06/01以前にInstafeed.jsを使っていても、今回の仕様変更で再度設定が必要のようです。

まずはInstagram Developer Documentationでアプリケーションの登録を行います。

instagram APIでのアプリケーションの登録

Client IDを取得します。

Client IDを取得します

次にアクセストークンを取得します。アクセストークンの取得は上記のClient IDとアプリケーションを登録した際に設定したredirect URIsを使用し、下記のURLへアクセス。

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&response_type=token

1
{"code": 403, "error_type": "OAuthForbiddenException", "error_message": "Implicit authentication is disabled"}

上記のようなエラーの場合は、「Disable implicit OAuth」のチェックを外して再度アクセスしてください。

Disable implicit OAuthのチェックを外して再度アクセス

その後、認証画面が表示されますのでAuthorizeで認証。

Instagramアプリケーションを認証

アクセストークンがURL欄に表示されますので、それを別途保存して使用します。

1
2
//アクセストークン
https://◯◯◯◯.◯◯◯/#access_token=◯◯◯◯◯◯◯◯◯◯.◯◯◯◯◯◯◯.◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯

ユーザーIDはaccessTokenの先頭からピリオドまでの数字です。

サンドボックスモードで自分の投稿は表示できますが、今までのようにハッシュタグで自分の投稿以外も含めて抽出することはできず、これはちょっとイタイですね。

また、2016/6/1からの変更前まではInstafeed.jsで同一サイト・同一ページで複数の設置を行っても問題なく表示されていたのですが、今回のサンドボックスモードの制限からか、アプリケーションを複数登録しても同一サイト・同一ページでは複数の表示が行えませんでした。

Sandbox Mode – Instagram Developer Documentation
https://www.instagram.com/developer/sandbox/

  • Apps in sandbox are restricted to 10 users
    //10ユーザーに制限
  • Data is restricted to the 10 users and the 20 most recent media from each of those users
    //これらのユーザのそれぞれから10ユーザーおよび20の最も最近のメディアに制限
  • Reduced API rate limits
    //APIのリクエスト制限（500 / hour）

いずれにせよ今回、6月1日以降の変更内容によりストップしてしまったアプリ・APIを利用した表示などがあるかと思います。ご使用されているサイトなどがあれば、ご確認をおすすめします。
また、もし表示などが止まっている場合は、サイト制作者・運営者様へご確認ください。

iPhone、iPad向けYouTubeを埋め込みJavaScript API

Google より、iPhone やiPad でも閲覧可能な、
JavaScript による、制御用Player API が公開されてました。

iframe もとくになんですし、結果がどうとしても、
個人的には、できればJavaScript を使ったほうが好みかなぁと。

<div id="player"></div>
<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '312',
          width: '512',
          videoId: 'NdQmGLjvMGo',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        if (evt.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
</script>

テスト→ kazunoriiguchi.com/youtube-js-iphone.html

iframe 埋め込み式 YouTube Player 向け JavaScript Player API のご紹介 – Google Japan Developer Relations Blog

YouTube API Blog: A New Way To Embed YouTube Videos

change_history