Slackbotからmentionを飛ばす

Googleスプレッドシートをcronのように使いSlackに投稿する
http://developer.hatenastaff.com/entry/2016/01/15/170000

から、mentionを飛ばすに当たり、普通に書いただけでは動かなかったので、メモ。

コードを修正

https://github.com/motemen/gas-cronsheet-slack/blob/master/app.js

こちらのコードの27行目あたりに、
LinkNames: 1,
と追加する

var msg = new SlackMessage({
    username: SLACK_USERNAME,
    icon_emoji: SLACK_ICON_EMOJI,
    LinkNames: 1,
    header: '<' + sheet.getParent().getUrl() + '|' + sheet.getParent().getName() + '> @' + now
});

mentionを呼び出す箇所を書き直し

@bob
としたい場合
<@U024BE7LH|bob>
とする。
@U024BE7LH
はユーザーID。

ユーザーIDはこちらの方法で調べられる。
http://yatta47.hateblo.jp/entry/2016/02/02/215933

参考ページ

Slack API でユーザ・チャンネルの名前がリンクされないときの対処法 (あるいは takosan を試した件)
http://qiita.com/yuya_takeyama/items/e6fb25ec70b4d9618890

Message Formatting | Slack
https://api.slack.com/docs/formatting#control_sequences

JavaScriptで単純なスマートフォン分岐

JavaScriptで単純なスマートフォン分岐。
タブレットはスマートフォン版を表示する場合。

PCからスマートフォンに分岐

if (navigator.userAgent.indexOf('iPhone')>0 || navigator.userAgent.indexOf('Windows Phone')>0 || navigator.userAgent.indexOf('Symbian')>0 || navigator.userAgent.indexOf('BlackBerry')>0 || navigator.userAgent.indexOf('Android')>0 || navigator.userAgent.indexOf('MOBILE')>0){
  setTimeout("link()", 0);
  function link(){
    location.href='/sp/';
  }
}

スマートフォンからPCに分岐

if (navigator.userAgent.indexOf('iPhone')>0 || navigator.userAgent.indexOf('Windows Phone')>0 || navigator.userAgent.indexOf('Symbian')>0 || navigator.userAgent.indexOf('BlackBerry')>0 || navigator.userAgent.indexOf('Android')>0 || navigator.userAgent.indexOf('MOBILE')>0){
}else{
  setTimeout("link()", 0);
  function link(){
    location.href='/';
  }
}

youtubeのAPIがIEの11.0.9600でうまく動作しない問題の解決方法

youtubeのAPIで、
onPlayerReadyやonPlayerStateChangeなどを使ったページを作った時、
IE11の特定のバージョンで動作しなかったので、解決方法を。

html5モードを強制にする

ただし、IE8以前で動作しなくなることが予想されるので、
そこだけは注意が必要。

下記ソース8行目
‘html5’: 1
がミソ。
他の値は全然違うものでも構わない。

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        'html5': 1
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

参考ページ

http://stackoverflow.com/questions/25041745/youtube-iframe-api-onstatechange-not-firing-in-firefox

どうやって判明したのか?

まずは、該当の動かないブラウザで、
下記ページにアクセスする。
https://www.youtube.com/html5
「html5プレイヤーを利用する」
を選択する。

これで、問題があるページの不都合が解決したので、
yotubeの一部APIは、html5プレイヤーでないと正確に動作しないのだろうと当たりをつけた。
問題が起こるバージョンののIEにおいて、
何も設定しないとデフォルトプレイヤーを利用する設定になっているのではないか?
ということで、強制的にhtml5モードを有効にする方法を探したら前述の結果になった。

git リポジトリからSourceTreeで差分を取り出す

git リポジトリから差分を取り出すスクリプト
を使えるようにするとき手こずったのでメモ。

リンク先の手順の通りにまずはセット。
それから、shellwords.rbというファイルを探す。
Mac10.10では
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/shellwords.rb
にあった。

ファイルの先頭に

Encoding.default_external = Encoding::UTF_8

の記述をしてセーブ。

これでほぼ動くようになる。

参考ページ

http://blog.44uk.net/2013/08/13/git-export-tools-for-sourcetre/
http://qiita.com/lab3-34/items/e69ab8d0c51c9b64fe02

youtubeをレスポンシブして背景にする

いつも使ってたプラグインjQuery tubularと、解析タグが衝突を起こして不定期にバグが起きる症状に悩まされたので、自分で背景スクリプトを書いてみました。
jQuery1.8.3で動作しますが、それ以前でも以後でも動く気はします。

html

bodyの開始タグの直後がおすすめ

<div id="bg">
	<div id="bgPlayer"></div>
	<div class="overlay"></div>
</div>

css

#bg{
	width: 100%;
	height: 100%;
	z-index: 1;
	position: fixed;
	overflow: hidden;
	left: 0;
	top: 0;
}
#bgPlayer{
	position: absolute;
}
.overlay{
	width: 100%;
	height: 100%;
	z-index: 2;
	position: fixed;
	left: 0;
	top: 0;
}

JavaScript


var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
	player = new YT.Player('bgPlayer', {
	  height: '315',
	  width: '560',
	  videoId: '2bJ49dOSP9o',
	  playerVars: { 'autoplay': 1,
			'controls': 0,
			'showinfo': 0,
			'rel' : 0,
			'modestbranding': 1,
			'loop': 1,
			'playlist': '2bJ49dOSP9o',
			'wmode': 'transparent'
		},
	  events: {
		'onReady': onPlayerReady,
	  }
	});
}

	function onPlayerReady(event) {
		event.target.mute();
		event.target.playVideo();
	}


$(function(){
	var ratio = 16/9;
	$('html,body').css({'width': '100%', 'height': '100%'});
	function setSize(){
        var width = $(window).width(),
            pWidth,
            height = $(window).height(),
            pHeight,
            $bgPlayer = $('#bgPlayer');

        if (width / ratio < height) {
            pWidth = Math.ceil(height * ratio);
            $bgPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0});
        } else {
            pHeight = Math.ceil(width / ratio);
            $bgPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2});
        }
	}

	setSize();

	$(window).resize(function() {
		setSize();
	});
});

参考サイト

jQuery tubular
http://www.seanmccambridge.com/tubular/

YouTube JavaScript Player API Reference
https://developers.google.com/youtube/js_api_reference?hl=ja

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=ja

レスポンシブサイトで遭遇するフォントサイズのバグまとめ

remを使っている時、chromeでだけフォントサイズがおかしい

bodyに対してだけem指定する。

body {
  font-size: 1.6em;
}

もしくはjs

$(function(){
    //chrome用の分岐処理
    var _ua = (function(){
     return {
        Blink:window.chrome
     }
    })();
     
    if(_ua.Blink){
        //chromeの文字サイズ対策
        document.body.style.webkitTransform = "scale(1)";
    }
});

参考サイト様

http://qiita.com/qtach1/items/2a48aa64dbcd820b7d76

textareaのフォントサイズがchromeでだけおかしい

フォントファミリーを指定してあげると治るようです。

textarea{
	font-family: verdana, "qMmpS Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Meiryo, "MS ゴシック", "MS PGothic", Sans-Serif;
}

参考サイト様

http://qiita.com/qtach1/items/c28df7c65ccf8cc35540

Android4系でpタグが変な位置で折り返される

pタグに背景色か背景画像を指定してあげる。

p{
	background-image: url(../img/s.gif);
}

参考サイト様

http://count0.org/2013/10/03/android-viewport-width-trap.html

Androidのchromeで文字サイズが大きくなる

こちらのように、viewportが固定の時に生じる現象らしい

<meta name="viewport" content="width=760" />

該当する要素に

.section1 p{ max-height: 100%; }

などとしてあげると治る。
ただしリセットcssなどに書いておいても効かなかったので注意が必要!

参考サイト様

http://www.seomode.jp/html-css/2014/06/25/3339/

iOSで文字サイズが変になる

* { -webkit-text-size-adjust: 100%; }

参考サイト様

http://ultimate-ez.com/2014/03/29/3572/

スマートフォンでテキストエリアをフォーカスしたら中身を選択済みにする

こういうの、PCではあるけどスマホでは見当たらない。
http://tmlife.net/programming/javascript/textarea-all-select.html

と思ったら、ソーシャルゲームの友達募集ページでは実装されてた。
http://pazudora-friend.com/che/

<input type="text" name="fbshare" onfocus="this.selectionStart=0; this.selectionEnd=this.value.length;" onmouseup="return false" value="自動で選択できます。">

動作確認結果

機種によって不安定なので、その旨クライアントさんに伝える必要あり。

■選択できたりできなかったり
iOS8.4safari

■選択されない(普通に選択はできる)
Android4.2 標準ブラウザ

■使いやすい
Android4.2 Chrome

別窓を開いてシェアしつつ、元々の窓ではシェアありがとう画面を表示する

<a href="https://www.facebook.com/sharer/sharer.php" target="_blank" class="shareBtn">Facebookでシェアする</a>
<a href="https://twitter.com/share?text=share!" target="_blank" class="shareBtn">Twitterでシェアする</a>
$(function(){
	$('.shareBtn').on('click', function(event) {
		window.location.href = 'thanks.html'
	});
});

jquery.infinitescroll をクリックで読み込む(改)

jquery.infinitescroll をクリックで読み込む方法はこちらが詳しいです。

【jQuery】無限スクロール[Infinite Scroll]を極限までカスタマイズ。

だけど、この方法のままだともう読み込むものが無い状態でも、「続きを見る」が表示され、クリックした後に読み込むものが無いことがわかる、というちょっと不親切な状況になってしまいます。
なので、ちょっと改善。
(変更したのはグレーのハイライト部分です)
読み込むページ数を指定して、そのページ数を読みきったらボタンを非表示にしてしまいます。

<script src="js/jquery.infinitescroll.min.js"></script>
$(function(){
	//ページ数を増やしたらpageMaxの数字を変更する
	var pageMax = 5;
	var pageNow = 1;
	$('#thanks .clearfix').infinitescroll({
		navSelector  	: '#infinitBox .btn',
		nextSelector 	: '#infinitBox .btn',
		itemSelector 	: '#infinitBox ul li',
		dataType		: 'html',
		loading: {
			finishedMsg: '<p class="loadingMessage">全ての画像を読み込みました!</p>',
			img: 'img/loading.gif',
			msgText: '<p class="loadingMessage">画像を読み込み中です</p>',
			speed: 'fast'
		}
	},
	function(newElements) {
		$(newElements).hide().delay(100).fadeIn(600);
		if (pageMax <= pageNow+1) {
			$btn.hide();
		} else {
			pageNow ++;
			$("#infinitBox .btn").appendTo("#infinitBox .wrap").delay(300).fadeIn(600);
		};
	});
	$('#infinitBox .clearfix').infinitescroll('unbind'); // 初期化
	$("#infinitBox .btn").click(function(){
		$('#infinitBox .clearfix').infinitescroll('retrieve');
		return false;
	});
});

Basic 認証中のページでのOGPのテスト

# Basic 認証 の基本設定
AuthUserFile /path/to/.htaccess
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

Satisfy Any
Order Allow,Deny

# FB のクローラを許可
SetEnvIf User-Agent "^facebookexternalhit.*$" fb_crawler
SetEnvIf User-Agent "^facebookplatform.*$" fb_crawler
Allow from env=fb_crawler

参考

Basic 認証中のページで OGP のテストをする