Analog Studio

<?php $access_token = "アクセストークン"; // $test = "@"; // 新規リクエストかどうか確認する為 // キャッシュしておいたファイルが指定時間以内に更新されていたらキャッシュしたファイルのデータを使用する // 指定時間以上経過していたら新たに Instagaram API へリクエストする $cache_lifetime = 3600; // キャッシュの最短更新間隔 [sec] とりあえず初期値で1時間に設定 $cache_lastmodified = @filemtime(dirname(__FILE__)."/cache/instagram_usrinfo.dat"); // 違う場所にキャッシュするなら適宜書き換えて下さい // 更新日時の比較 if(!$cache_lastmodified){ // キャッシュが存在しない場合 $usrinfo_json = @file_get_contents("https://api.instagram.com/v1/users/self/?access_token=". $access_token); $posts_json = @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token=". $access_token. "&count=9"); file_put_contents(dirname(__FILE__)."/cache/instagram_usrinfo.dat", $usrinfo_json, LOCK_EX); file_put_contents(dirname(__FILE__)."/cache/instagram_posts.dat", $posts_json, LOCK_EX); } else{ if(time() - $cache_lastmodified > $cache_lifetime){ // キャッシュはあるが古い場合 $usrinfo_json = @file_get_contents("https://api.instagram.com/v1/users/self/?access_token=". $access_token); $posts_json = @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token=". $access_token. "&count=9"); file_put_contents(dirname(__FILE__)."/cache/instagram_usrinfo.dat", $usrinfo_json, LOCK_EX); file_put_contents(dirname(__FILE__)."/cache/instagram_posts.dat", $posts_json, LOCK_EX); } else{ // キャッシュがあって新しい場合 $usrinfo_json = @file_get_contents(dirname(__FILE__)."/cache/instagram_usrinfo.dat"); $posts_json = @file_get_contents(dirname(__FILE__)."/cache/instagram_posts.dat"); // $test = ""; // キャッシュから読み込んだら@を表示しない } } // 取得したJSON形式データを配列に展開する if($usrinfo_json){ $usrinfo_data = json_decode($usrinfo_json); if($usrinfo_data->meta->code != 200){ $usrinfo_data = null; } } if(isset($posts_json)){ $posts_data = json_decode($posts_json); if($posts_data->meta->code != 200){ $posts_data = null; } } ?> <!-- <article> --> <header> <section> <h1> <a href="https://www.instagram.com/" target="new" rel="noopener">Instagram</a> </h1> <h2> <div> <img src="<?php echo $usrinfo_data->data->profile_picture; ?>" alt="profile_picture"> </div> <div> <a href="https://www.instagram.com/<?php if(isset($usrinfo_data)){ echo $usrinfo_data->data->username; } ?>/" target="new" rel="noopener"> <?php if(isset($usrinfo_data)){ echo $usrinfo_data->data->full_name."\n"; } ?> (<?php // echo $test; ?>@<?php if(isset($usrinfo_data)){ echo $usrinfo_data->data->username; } ?>) </a> </div> </h2> <p> 投稿数：<?php if(isset($usrinfo_data)){ echo $usrinfo_data->data->counts->media."\n"; } ?> フォロワ：<?php if(isset($usrinfo_data)){ echo $usrinfo_data->data->counts->followed_by."\n"; } ?> </p> </section> <nav id="instagram_layout_toggle"> <div id="instagram_layout_list">LIST</div> <div id="instagram_layout_grid">GRID</div> </nav> </header> <main id="posts_list"> <?php if(isset($posts_data)){ foreach($posts_data->data as $data){ $caption = $data->caption->text; $caption = mb_convert_encoding($caption, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); $caption = preg_replace("/\n/", "<BR>", $caption); $caption = preg_replace("/#(.+?)(\s|\n|#|@)/", "<a href=\"https://www.instagram.com/explore/tags/$1/\" target=\"new\" rel=\"noopener\">#$1</a>$2", $caption); $caption = preg_replace("/@(.+?)(\s|\n|#|@)/", "<a href=\"https://www.instagram.com/$1/\" target=\"new\" rel=\"noopener\">@$1</a>$2", $caption); ?> <div> <a href="<?php echo $data->link; ?>" class="instagram" target="new" rel="noopener" title="likes:<?php echo $data->likes->count; ?>"> <div style="background-image: url('<?php echo $data->images->standard_resolution->url; ?>');"> <img src="<?php echo $data->images->standard_resolution->url; ?>" alt="likes:<?php echo $data->likes->count; ?>"> </div> </a> <p> <?php echo $caption; ?> </p> </div> <?php }} else{ ?> <p> 投稿を読み込めませんでした。再度読み込んで下さい。 </p> <?php } ?> </main> <!-- </article> -->

/* font-family for "Instagram Logo" */ @font-face{ font-family : 'Billabong'; font-style : normal; font-weight : normal; src : local('Billabong'), url('./Billabong.woff') format('woff'); } article#SNS_Instagram{ display : block; margin : 10px; border : 1px solid rgba(0,0,0,0.3); } article#SNS_Instagram *{ text-align : left; /* ヘッダ部分をインスタ風のグラデーションにする color : white; */ } article#SNS_Instagram header > section{ display : block; margin : 0px; padding : 10px; /* ヘッダ部分をインスタ風のグラデーションにする background-color : #b900b4; background : linear-gradient(-135deg,#1400c8b4,#b900b4b4,#f50000b4); */ background-color : white; background : linear-gradient(135deg,#ebff3712,#46ff4b12,#0affff12); /**/ border-bottom : 1px solid #666; } article#SNS_Instagram header h1{ margin : 0px; padding : 0px; } article#SNS_Instagram header h1 > a{ position : relative; margin : 0px; margin-left : 75px; padding-left : 10px; font-family : 'Billabong'; /* インスタロゴ風のフォント */ font-weight : 400; font-size : 36px; line-height : 50px; letter-spacing : 0.03em; /* ヘッダ部分をインスタ風のグラデーションにする */ color : inherit; /**/ } article#SNS_Instagram header h1 > a::before{ position : absolute; top : 0px; left : -75px; content : '\f16d'; font-family : 'Font Awesome 5 Brands'; font-weight : 900; font-size : 72px; line-height : 75px; width : 75px; text-align : center; /* ヘッダ部分をインスタ風のグラデーションにする */ background : linear-gradient(-135deg,#1400c8,#b900b4,#f50000); background-clip : text; text-fill-color : transparent; -webkit-background-clip : text; -webkit-text-fill-color : transparent; /**/ } article#SNS_Instagram header h2{ margin : 0px; margin-left : 75px; padding-left : 10px; line-height : 25px; display : flex; } article#SNS_Instagram header h2 div{ display : inline-block; } article#SNS_Instagram header h2 *{ font-size : 16px; line-height : 25px; } article#SNS_Instagram header h2 div:first-child{ width : 25px; height : 25px; overflow : hidden; border-radius : 25px; } article#SNS_Instagram header h2 div:first-child img{ width : 100%; height : 100%; } article#SNS_Instagram header h2 div:nth-child(2){ margin-left : 5px; } article#SNS_Instagram header h2 div:nth-child(2) a{ font-size : 16px; color : inherit; } article#SNS_Instagram header p{ display : none; } /* 表示形式を切り替える */ article#SNS_Instagram header nav{ display : none; font-size : 0px; text-align : center; background : linear-gradient(0deg, rgb(197, 197, 197), rgb(245, 245, 245)); border-bottom : 1px solid rgba(0,0,0,0.3); } article#SNS_Instagram header nav > div{ position : relative; display : inline-block; width : 49%; box-sizing : border-box; padding : 5px; font-size : 0px; color : transparent; text-align : center; cursor : pointer; } article#SNS_Instagram header nav > div#instagram_layout_list::after{ content : '\f0c9'; font-family : 'Font Awesome 5 Free'; font-weight : 900; font-size : 24px; line-height : 34px; color : #666; vertical-align : middle; } article#SNS_Instagram header nav > div#instagram_layout_grid::after{ content : '\f00a'; font-family : 'Font Awesome 5 Free'; font-weight : 900; font-size : 24px; line-height : 34px; color : #666; vertical-align : middle; } article#SNS_Instagram header nav > div + div{ margin-left : 1%; } article#SNS_Instagram header nav > div + div::before{ content : ''; position : absolute; display : block; width : 1px; left : -1%; top : 0px; bottom : 0px; background-color : #666; transform : translateX(-50%); } /* 本家インスタ風に3*3の格子状にサムネイルを並べる */ article#SNS_Instagram main#posts_grid{ display : flex; padding-top : 1px; font-size : 0px; text-align : center; flex-wrap : wrap; } article#SNS_Instagram main#posts_grid > div{ display : inline-block; padding : 2px; width : 33%; box-sizing : border-box; flex-grow : 1; } article#SNS_Instagram main#posts_grid > div > a{ position : relative; display : block; width : 100%; padding-top : 100%; } article#SNS_Instagram main#posts_grid > div > a > div{ position : absolute; top : 0px; bottom : 0px; left : 0px; right : 0px; overflow : hidden; background-position : center; background-size : cover; } article#SNS_Instagram main#posts_grid > div > a > div > img{ opacity : 0; visibility : hidden; } article#SNS_Instagram main#posts_grid > div > p{ display : none; } /* サムネイルとコメントを並べる */ article#SNS_Instagram main#posts_list{ display : block; height : 360px; overflow-y : auto; } article#SNS_Instagram main#posts_list > div{ display : block; margin : 5px; padding : 5px; border-radius : 5px; border : 1px solid #999; } article#SNS_Instagram main#posts_list > div > a > div{ display : block; position : relative; padding-top : 50%; overflow : hidden; } article#SNS_Instagram main#posts_list > div > a > div > img{ position : absolute; top : 50%; left : 0px; width : 100%; height : auto; transform : translateY(-50%); } article#SNS_Instagram main#posts_list > div > p{ display : block; margin : 5px; padding : 0px; color : #252525; text-align : left; word-break : break-all; } article#SNS_Instagram main#posts_list > div > p > a{ color : #3402A7; cursor : pointer; }

// DOMツリーが構築されたら実行する // 画像などのメディアファイル読み込み後にインスタを表示するなら"DOMContentLoaded"を"load"に変更 window.addEventListener("DOMContentLoaded", function(){ getInstagram(); // Instagramのタイムラインを読み込む }, false); // インスタのタイムラインを読み込む var getInstagram = function(){ // IEなどの一部ブラウザでXMLHttpRequestが使えないのでその対策でActiveObjectでも試す var _lastModifiedRequest = window.XMLHttpRequest ? new XMLHttpRequest() : window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : null; // 表示させる要素セレクタをgetElementByIdで取得する if(document.getElementById("info_SNS")){ var _infoSNS = document.getElementById("info_SNS").appendChild(document.createElement("article")); } else{ return 0; } if(_lastModifiedRequest){ if(!currentScriptDirectory) return 0; // ディレクトリが取得できなかったら終了(後ろの方で定義してます) // currentScriptDirectoryはこのscriptが掛かれた外部jsファイルのディレクトリパスが入る // もちろん絶対パスで書いても大丈夫です _lastModifiedRequest.open("GET", currentScriptDirectory + "instagram.php", true); // GETで先ほどのPHPから整形済みHTMLコードを取得させる _lastModifiedRequest.onreadystatechange = function(){ if(_lastModifiedRequest.readyState == 4 && _lastModifiedRequest.status == 200){ // 正常に読み込めたらHTMLに書き出し _infoSNS.id = "SNS_Instagram"; _infoSNS.innerHTML = _lastModifiedRequest.responseText; } else if(_lastModifiedRequest.readyState == 4 && _lastModifiedRequest.status != 200){ _infoSNS.innerHTML = "<p>取得に失敗しました。再読込して下さい。</p>"; } }; _lastModifiedRequest.send(null); // GETでリクエスト実行 } // インスタの読み込みが終わったら表示切替用の関数を呼び出す // innerHTMLで書き出すとDOMツリーが構成されるまで少し時間が掛かるので150msごとにチェックしてDOMができたらクリックイベントを登録する (function _DOMcheck(){ if(_infoSNS.firstChild){ instagramLayout(); } else{ setTimeout(_DOMcheck, 150); } })(); }; // インスタ投稿のレイアウトを切り替える // タイムラインのDOMツリーが構成され次第、呼び出される var instagramLayout = function(){ var _instagramTimeline = document.getElementById("SNS_Instagram"); if(_instagramTimeline){ var _main = _instagramTimeline.getElementsByTagName("main")[0]; var _nav = document.getElementById("instagram_layout_toggle"); var _list = document.getElementById("instagram_layout_list"); var _grid = document.getElementById("instagram_layout_grid"); if(_nav && _list && _grid){ _list.addEventListener("click", function(){ _main.id = "posts_list"; }, false); _grid.addEventListener("click", function(){ _main.id = "posts_grid"; }, false); _nav.style.display = "block"; } } }; // この外部scriptのファイルパスを取得して変数に保存しておく // 戻り値は最後の"/"が残る // 取得に失敗した場合は"null"を返す var currentScriptDirectory = (function() { if(document.currentScript){ var _directory = document.currentScript.src; _directory = _directory.split("/"); _directory = _directory.splice(0, _directory.length - 1); _directory = _directory.join("/") + "/"; return _directory; } else{ var _scripts = document.getElementsByTagName("script"); var _script = _scripts[_scripts.length - 1]; if(_script.src){ var _directory = _script.src; _directory = _directory.split("/"); _directory = _directory.splice(0, _directory.length - 1); _directory = _directory.join("/") + "/"; return _directory; } else{ return null; } } })();