やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

instagramのフィードを表示させたい

JSONデータをPHPでごにょごにょして....

というのを自作するのは骨が折れるので、

プラグインを使うことに。

下準備

↓を参考に、Instagramの開発者ページからアプリケーション登録を行っておく。
teamnaporitan.com

instafeed.js

instafeedjs.com

header部分で、instafeed.min.jsを読み込んでおく。
jQueryは不要、javascriptのみで動く)

※あいにく動画をブラウザ上で再生する機能はついていないので注意。

javascript

var userFeed = new Instafeed({
  get: 'user',
  userId: 000000000000, //ユーザーID
  accessToken: '000000000.xxxxxxxxx.xxxxxxxxxxxxxxxx', //アクセストークン
  target: 'insta-feed', //要素のID
  limit:1,
  resolution: 'standard_resolution',
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a><span class="likes">{{likes}}</span><span class="comments">{{comments}}</span><p class="caption">{{caption}}</p>'
});
userFeed.run();

ユーザーIDがわかんなくなっちゃったら、
ここですぐに出せる。
smashballoon.com


こういう見た目にしたかったので、
f:id:ajicolor:20171121191142p:plain
HTMLとCSSは以下のように整えた。

HTML

<div class="instagram">
<img src="img/insta_icon.jpg" class="insta_icon" alt=""><a class="btn-insta" href="https://www.instagram.com/userid/" target="_blank"><span class="username">username</span></a><i class="fa fa-instagram" aria-hidden="true"></i></a>
<div id="insta-feed">
</div><!--#insta-feed-->
</div><!--.instagram-->

CSS

.instagram{
	box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
	padding:8px 0;
	position: relative;
	height:400px;
	overflow-y: scroll;	
}
.instagram img.insta_icon{
	width:30px;
	height:30px;
	border-radius:15px;
	margin:0 8px 8px;
}
.instagram span.username{
	display: inline-block;
	padding:4px 0 0;
	font-size:1.2rem;
	color:#333;
	font-weight: 500;
	vertical-align: top;
}
.instagram i.fa-instagram{
	position: absolute;
	top:14px;
	right: 14px;
	font-size:20px;
	color:#aaa;
}
#insta-feed{
	font-family: Arial,sans-serif;
	word-wrap:break-word;
}
#insta-feed img{
	width:100%;
	height:auto;
}
#insta-feed .caption{
	font-size: 0.8rem;
	line-height:1.2;
}
#insta-feed .likes,
#insta-feed .comments{
	display: inline-block;
	color:#777;
	padding:2px 4px 2px 0;
}
#insta-feed .comments::before{
	content:"\f075";
	font-family: FontAwesome;
	padding-right: 3px;
}
#insta-feed .likes::before{
	content:"\f004";
	font-family: FontAwesome;
	padding-right: 3px;
}



Everioで撮った動画の書き出し備忘録

これまでの人生、

披露宴の余興で映像作ってDVDに焼いたりなんだりで、

何度「書き出すと縦長に伸びちゃう現象」に悩まされたことか。
 

どちらが原因かはわからんけど、とにかく

「さっきまで再生できてたアス比で書き出す」

それだけのことが、なぜできない・・・・!!


.MODとかいう拡張子

いまどきビデオカメラなんて使う人あんまりいないだろうが、

うちには9年モノのEverioがある。

今はiPhoneで撮ってるけど、

Everioで撮った映像データを他人に渡さねばならない、という事案が発生。

Everioで撮った映像は .MOD とかいう変態拡張子で保存され、

VLCメディアプレーヤー(以下VLC)でしか見ることができない。

このVLC、どんな動画でもだいたいは再生できるという剛の者。

VLCの秘められたる力

VLC…おまえ…動画の書き出しなんて、いつのまに覚えたんや……

VLC media Playerの意外な使い方:動画の変換、音声の変換 - ぼくんちのTV 別館

  1. ファイル > ストリーミング/エクスポートウィザード を開く
    • こんなややこしい名前で、書き出し機能だって気づくわけないやろ。
  2. トランスコーディング/ファイルに保存 を選択
  3. ストリームの選択 で書き出したいファイルを選択し、次へ
  4. トランスコーディングビデオ
    • 色々試した結果、今回はこれ。
      • Codec : MPEG2 Video
      • Bitrate(kb/s) 3072
  5. カプセル化フォーマット
  6. 保存ファイルの選択 で保存先とファイル名を指定
  7. 終了 を押すと変換が開始される。
    • わりと早い。3分くらいの動画なら1分もかからない

f:id:ajicolor:20171101162947p:plain

えらいぞ、VLC

ちょっとした変換・書き出しであればVLCで事足りそうだね。

ハンバーガーメニュー

なんだかんだ言っても、

ECサイトや企業サイトではなく、個人のページとか、単純な作りのページであれば

まだまだハンバーガーメニューは有効だと思うのです。

ハンバーガーメニューはクソ」とか言われてた頃に比べて、浸透度も高まってるだろうし。

仕様
  • 右上に固定
  • クルッと回ってバツになる、それを丸で囲う
  • メニューをクリックしてジャンプしたらデフォルトの非表示状態に戻る

HTML

<nav>
<a class="menu-trigger">
  <span></span>
  <span></span>
  <span></span>
</a>
<ul class="navmenu">
	<li><a href="#">top</a></li>
	<li><a href="#menu1">menu1</a></li>
	<li><a href="#menu2">menu2</a></li>
	<li><a href="#menu3">menu3</a></li>
	<li><a href="#menu4">menu4</a></li>
</ul>
</nav>

CSS

.menu-trigger {
	position: fixed;
	top:14px;
	right:24px;  
	width: 30px;
	height: 26px;
	z-index: 999;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menu-trigger span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 14px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
/***hover**/
.menu-trigger:not(.active):hover span:nth-of-type(1) {
  top: 3px;
}
.menu-trigger:not(.active):hover span:nth-of-type(3) {
  bottom: 3px;
}
/***動き***/
.menu-trigger span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-315deg) scale(.8);
  transform: translateY(12px) rotate(-315deg) scale(.8);
}
.menu-trigger.active span:nth-of-type(2) {
  width: 34px;
  height: 34px;
  background-color: transparent;
  border: 1px solid #333;
  border-radius: 50%;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(315deg) scale(.8);
  transform: translateY(-12px) rotate(315deg) scale(.8);
}
nav ul{
display:none;
position: fixed;
top:0;
right:0;
height:100vh;
max-height:400px;
width:600px;
max-width: 600px;
z-index: 100;
background-color:rgba(255,255,255,0.85);
}

jQuery

$(function(){
//ハンバーガーメニュー
    $(".menu-trigger").on("click", function() {
        $(this).toggleClass("active");
        $(this).next("ul").slideToggle();
    });

//メニューを選択したら閉じる
    $('.navmenu li a').click(function() {
	$('nav ul').hide();
	$('.menu-trigger').removeClass("active") 
	});
	$('nav').click(function() { event.stopPropagation(); });
});

おまけ

スムーススクロール

jQuery
  • #をダブルクォーテーションで囲いましょう。
$(function(){
   $('a[href^="#"]').click(function() {
      var speed = 800; 
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});