WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Instagram API を使ってインスタグラムの画像をサイトに表示させる

f:id:yachin29:20180507003845j:plain


最近はwebサイト上にインスタグラムに投稿した画像を表示しているサイトも珍しくなくなってきました。
ここではInstagram API を使ってインスタグラムのデータをhtmlファイルに埋め込む方法を説明していきます。

Instagram APIを使って出来る事・出来ない事

2018年4月4日にInstagram API の仕様が大幅に変更されました。
今までは、Sandboxというモードを使うことによって、他のユーザーの承認を得られることができれば、限定的にではありますが、他のユーザーの写真を取得することができるようになっていました。しかし、これは2018年4月4日をもって一切できなくなったようです。
なので、クライアントの画像を取得する場合、下記で説明している[CLIENT-ID]と[REDIRECT-URI]をクライアントのアカウントで作成する必要があります。
さらに、2020年には現在のAPIが全て廃止され、自身のアカウントでさえ現在のInstagram APIを使ってWebサイトに表示させる事は完全にできなくなります。
Instagramではこれにとって代わり、ビジネスアカウント向けのInstagram Graph APIというものを充実させていくようです。Facebookでも以前似たような仕様変更がありました。

今後Instagramの写真をWebサイトで表示したい場合はどのしたらいいか

今の所、2020年にInstagram APIが仕様廃止になってしまう予定ですが、場合によっては予定が早まる事も十分考えられます。
ですので、今後Instagramの写真をWebサイトで表示したい・扱いたい場合は、個人的には、「Instagramページへのリンクを貼ったアイコンやテキストをWebサイトに表示する」程度に納めることが無難ではないかと思います。

Sandboxモード

実はInstagramAPIは開発者登録さえすれば自由に使える、というものではありません。
登録したばかりのアプリは「Sandbox Mode(サンドボックスモード)」という状態で動作するのですが、Sandbox Modeでは例えば他のユーザーのデータを自由に取得することはできないなどの制限があります。
この制限を外す、言い換えると別の権限を付加するには、InstagramのReview(審査)が必要です。
ただし、このReviewを通るにはかなり時間がかかってしまいます。



arrown-blog.com





投稿記事を表示させる場合

インスタグラムの個別の投稿記事を埋め込む場合は非常に簡単で、埋め込みたい記事に行き、記事の右下に「・・・」のマークがあるので、そこをクリックします。そして出てきた埋め込みコードをhtmlの任意の場所に貼るだけです。
埋め込みコード内にスタイルが直接埋め込まれている為、自身のcssを効かせたい場合は注意が必要ですが、作業自体は非常に簡単です。またこの方法であれば、基本的には芸能人など誰のアカウントでも表示させる事が可能です。





タイムライン形式で画像を表示させる場合

個別の記事では無く、最新の投稿画像10件(タイムライン)などを表示させたい場合はInstagram API を使用する必要があります。Instagram API を使用する場合、Instagram API の登録やトークンの取得、json形式のデータの取得など、設定しなければいけない事が多くあります。


Instagram API の登録

まずは下記のページからAPIの登録をします。[Register a New Client]ボタンをクリックし、必要な情報を記入し登録します。
https://www.instagram.com/developer/
f:id:yachin29:20180507005647p:plain


登録に必要な情報
  • [Application Name]任意で構いません
  • [Description]任意で構いません。
  • [Website URL]開発者のホームページを入力します。APIの使用するドメインである必要はありませんが、認証後にトークンを取得する為に必要です。
  • [Contact email]連絡用メールアドレス

登録が終わると「CLIENT ID」が発行されます。
f:id:yachin29:20180507005445p:plain


アクセストークンの取得

次に登録したAPIの認証作業を行います。

以下のURLの[CLIENT-ID]と[REDIRECT-URI]を先ほど登録したアプリの情報に置き換えて、アクセスすることで認証が可能です。[REDIRECT-URI]は登録時に設定した[Website URL]と同じです。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

[CLIENT-ID]と[REDIRECT-URI]を置き換えてアクセスすると、[Website URL]で登録したURLに飛びますが、そのURLのパラメータにアクセストークンが付与されています。そのトークンはあとで必要になるので必ず保存しておきましょう。

f:id:yachin29:20180507012232p:plain

APIデータの取得

先ほど取得したアクセストークンを使ってInstagram APIを取得してみましょう。アクセスするとjson形式でデータが確認できます。あとはこのデータをJavaScriptPHPなどで処理すればOKです。
以下のURLの「ACCESS-TOKEN」部分を先ほど取得したアクセストークンの数値と置き換えましょう。

https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN

詳しい解説はこちらのサイトに記載されています。スライド付きで非常に解り易いです。
capotast.co.jp



Instagram APIjsonデータを使い、画像を表示させる

JavaScriptだけで表示させる事も可能ですが、「アクセストークン」などの情報が表示されてしまう為PHPを使って表示させます。
今回は「アクセストークン」部分のみphpにし、表示部分はJavascriptで行います。
また、表示させる情報は画像と「いいね」の数の2つのみにします。

f:id:yachin29:20180507042543p:plain



index.htmlではulだけ設置し、中のliはjsで生成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Instagtam API テスト</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="insta.css">
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="insta.js"></script>
</head>
<body>
  <h1><i class="fa fa-instagram fa-fw"></i>Instagtam APIテスト</h1>
  <ul class="instagram"></ul>
</body>
</html>


insta.js

$(function(){
    var $container = $(".instagram");
    var html = "";

    $.ajax({
        url: "insta.php",//PHPファイルURL
        type:"POST",
        dataType: "json"
    })
    
    
    .done(function(data){
        //通信成功時の処理
        $.each(data.data,function(i,item){
            var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
            var link = item.link; //リンクを取得
            var like = item.likes.count;//いいねの数
            html += '<li><a href="' + link + '"target="_blank"><img src="' + imgurl + '"></a><p class="ins_like"><i class="fa fa-heart" aria-hidden="true"></i>' + like + '</p></li>';
        });
    }).fail(function(){
        //通信失敗時の処理
        html = "<li>画像を取得できません。</li>";
    }).always(function(){
        //通信完了時の処理
        $container.html(html);
    });
});

「アクセストークン」のような重要なデータは他人に見られないようにphpファイルに分け、ajaxを使ってjsファイルで読み込みます。
insta.php

<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //アクセストークン
    $access_token = "ここにアクセストークンが入ります"; //取得したアクセストークンを設置
    $count = 8; //表示件数

    
    //JSONデータを取得して出力
    echo @file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$access_token."&count=".$count);
    //終了
    exit;
}
?>


あとは見た目をcssで整えます。

@charset "UTF-8";
/* CSS Document */

html,body,h1,p,ul,li {
  margin: 0;
  padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #222;
}
img {
vertical-align: bottom;
}


h1 {
text-align: center;
padding: 20px 0;
}

.instagram {
  width: 1000px;
  margin: 0 auto;
}

.instagram li {
margin: 5px;
  float: left;
  width: 240px;
  height: 240px;
  overflow: hidden;
  position: relative;
}
p.ins_like {
position: absolute;
width: 100%;
height: 40px;
bottom: 0;
left: 0;
background: rgba(255,255,255,0.70);
padding: 10px 20px 10px 0;
box-sizing: border-box;
text-align: right;
}
.instagram li img {
max-width: 100%;
}
.fa-heart {
margin-right: 10px;
color: #EA4E50;
}


もっと細かいデータ取得を行いたい場合はphpで各パロメータを取得する必要があります。各パロメータの取得方法は以下のサイトを参考に。
qiita.com




「SnapWidget」のようなツールを使う事で、簡単にタイムラインを埋め込みが出来ますが、無料版は色々と制限があります。
snapwidget.com

児童発達支援・放課後等デイサービス あいる

児童発達支援・放課後等デイサービスあいるは、東京都東久留米市にある1歳半から学齢期のお子さまを対象にした児童教室です。経験豊富なスタッフが、一人一人の特性や発達段階等に合わせて、それぞれにあった指導方法、専門的な学習、コミュニケーション指導など様々な支援を行っています。

airujidou.php.xdomain.jp



f:id:yachin29:20180424101430j:plain
http://airujidou.php.xdomain.jp/

Automatorを使ってフォルダに画像の自動圧縮機能をつける

授業でも幾度となく出てきた「TinyPng
画像のデータ量を半分以上軽くしてくれ、なおかつ画像の質もそこそこ保ってくれる、という便利なサービスで、画像を高解像度に対応させるためにはもはや必須と言っても良いくらいです。

f:id:yachin29:20161221195210p:plain


このTinyPNG、実は中で動いているのは「pngquant(ピングクォント)」という画像圧縮プログラムなのです。pngquantは無料でダウンロードする事が出来るのですが、今回はさらにmacAutomatorを使って、pngquantをフォルダアクションに紐付けする事でフォルダに画像を入れた瞬間、「自動で画像を圧縮してくれる」というとても便利な事が出来るようになります。macの人は是非やってみましょう。windowsの人もphotoshopのcc2017であればTinyPNGのプラグインがダウンロード出来るので、そちらを試してみてください。

まずは
pngquant — lossy PNG compressor
のダウンロードですが、今回は全てターミナル上で作業していきます。ターミナルは一見難しそうに見えますが、慣れてしまうと非常に楽に作業を進める事が出来ます。
f:id:yachin29:20161221203311p:plain



インストール方法

Homebrewが入っていればターミナルを使ってたった1行でpngquantがインストール出来るので、もし「Homebrew」が入っていない人はまず「Homobrew」をインストールしましょう。

「Homebrew」
macOS 用パッケージマネージャー — macOS 用パッケージマネージャー
f:id:yachin29:20161221204406p:plain


Homebrewのインストールもターミナルを使えば簡単で、ターミナル上で下記の1行をコピペしてあげれば「Homebrew」がインストールされます。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※インストールする際に鍵のマークが出て、PCのログインパスワードを求められるので、入力する。(ターミナルに慣れてないと非常に解りづらいので注意)



続いて以下の1行を同じようにコピペしてあげるとpngquantがインストールできます。

brew install pngquant

これで必要な物が全部揃いました。


Automatorでフォルダアクションの設定

f:id:yachin29:20161221205717p:plain
まずデスクトップに適当なフォルダーを作って、そのフォルダーにフォルダアクションでpngquantを紐付けします。


次にフォルダーに画像を入れたら自動でpngquantが動くようにAutomatorでフォルダとpngquantを紐付けします。

まずはAutomatorを立ち上げて、「新規書類」を押します。
f:id:yachin29:20161221210255p:plain


上のメニューからフォルダアクションを選択し、選択肢の中から「フォルダアクション」を選びます。
右上の「フォルダを選択」となっているプルダウンで「その他...」を選び、さっき作ったフォルダを選択します。
左側のアクションの中から「シャルスクリプトを実行」のアクションを追加し、フォームへ以下の1行を追加しましょう。

/usr/local/bin/pngquant --ext .png --force "$@"


f:id:yachin29:20161222181033p:plain


さらに自動圧縮がちゃんと完了したらその都度通知してくれるように、通知コマンドを追加し「タイトル」と「サブタイトル」に適当な文字を入れてみましょう。

f:id:yachin29:20161222181401p:plain


以上で終わりです。
今まではブログなどで使うキャプチャー画像はいちいち圧縮するのが面倒でしていませんでしたが、これからはどんな画像もpngなら自動であっという間に圧縮出来るので、とても助かります。



参考サイト
www.lifull.blog

スマホアプリの種類

そもそもアプリとは?

そもそもアプリとは「アプリケーションソフトウェア」の略で、ソフトウェアの分類のうち、特定の作業を行うために使用されるソフトウェアの総称である。
例としては、文書を作成するためのワープロソフト、表を作成するための表計算ソフト、電子メールをやり取りするための電子メールソフト(メーラー)、プレゼンテーションの資料を作成するためのプレゼンテーションソフト、画像を作成するためのドローソフトやペイントソフト、写真を編集するためのフォトレタッチソフト、音楽データを再生するための音楽ソフト、その他会計ソフト、家計簿ソフト、年賀状ソフトなどがある。

アプリの種類

現状、スマホアプリは大きく分けると「ネイティブアプリ」と「ハイブリッドアプリ」の2つに分ける事が出来ます。

ネイティブアプリとは?

ネイティブアプリとは、特定のモバイルOSにおいて動作するよう設計されたアプリです。そのため、他のOSでは動作せず、開発言語もOSによって異なります。
ネイティブアプリのメリットは、カメラ機能や、位置センサー機能、プッシュ通知等のスマホバイスが持っている機能を簡単に利用でき、動作も軽い事です。

ハイブリッドアプリとは?

それに対し、ハイブリッドアプリとはHTML5CSSJavaScriptなどの従来のWeb技術で開発が出来、クロスプラットフォーム対応、且つカメラやGPSなどのスマホバイスの機能を利用しているアプリの事です。欠点としてはアプリ自体の動作が遅いので、ゲームなどの大きいデータを扱うアプリには向いていません。また基本的なスマホバイスの機能は利用出来ますが、新機能は使えない場合が多いです。



なので、HTML5CSSJavaScriptの知識さえあれば、新たにJavaやSwiftといった新しい言語を覚える事無くスマホアプリは作る事が出来ます。
さらに、「monaca」等の開発プラットフォームや「Onsen UI」などのフレームワークを使う事で簡単な機能であれば短時間で作成する事が出来ます。


ja.monaca.io



ja.onsen.io

広告関係4団体が「広告制作取引『受発注』ガイドライン」を策定

広告関係4団体「新しい働き方」円卓会議、広告制作取引「受発注」ガイドラインを策定。

広告業務に携わる関係者全員がこれまでの働き方を見直し、長時間労働を抑制するための取り組みとして、公益社団法人日本アドバタイザーズ協会一般社団法人日本広告業協会、一般社団法人日本アド・コンテンツ制作協会、公益社団法人日本広告制作協会の広告関係4団体は「新しい働き方」円卓会議を第2回(12月8日)、第3回(1月11日)と開催し、「広告制作取引『受発注』ガイドライン」を策定いたしました。

広告制作業務における長時間労働削減のためには、受注/発注側の両者がお互いの立場を尊重し、業務を進めることが重要です。
このガイドラインは制作費や納期などの発注内容を事前に明確にし、適切なスケジュール管理のもと業務管理を行い、受注/発注両者が長時間労働の抑制に取り組むことを目的としたものです。それらを「受発注確認書」として電子メールで取り交わすことをルールといたしました。

http://www.jaa.or.jp/archives/information/%E5%BA%83%E5%91%8A%E9%96%A2%E4%BF%824%E5%9B%A3%E4%BD%93%E3%81%8C%E3%80%8C%E5%BA%83%E5%91%8A%E5%88%B6%E4%BD%9C%E5%8F%96%E5%BC%95%E3%80%8E%E5%8F%97%E7%99%BA%E6%B3%A8%E3%80%8F%E3%82%AC%E3%82%A4%E3%83%89/



「広告制作取引『受発注』ガイドライン」

Fetch API を使ってみる

var box = document.getElementById("box")
fetch("logo2.svg")
.then(function(response) {
    return response.text();
}).then(function(svg) {
    box.innerHTML = svg
})

css3を使ったドロップダウンメニュー

css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。
ただ、visibilityの指定のみだと、アニメーションは効かないので必ず一緒に「opacity」の指定もします。

visibility

visibilityプロパティは、ボックスの表示(visible)・非表示(hidden)を指定する際に使用します。
非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。


<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドロップダウンメニュー</title>
<style>
#btn {
width: 200px;
height: 50px;
background: #EE3639;
position: relative;
}
#btn:hover {
background: #DE9D9E;
}
#box {
width: 500px;
height: 500px;
background: #59CED6;
position: absolute;
top: 50px;
left: 0;
visibility: hidden;
opacity: 0;
transition:0.5s;
}
#btn:hover #box {
visibility: visible;
opacity: 1;
}
#inner {
width: 200px;
height: 200px;
background: #222;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>

<body>
<div id="btn">
<div id="box">
<div id="inner"></div>
</div>
</div>
</body>
</html>