アンカーリンクでスムーススクロール。ルート相対パスなどでも可

グローバルメニューなどはルート相対パスなどで書くこともある

<a href="/contents/#example">テストテキスト</a>

が、その中にアンカーリンクがあり、スムーススクロールを行いたい場合に有効なjQueryを書いた。

$(function(){
  $('a[href *= "#"]').on('click', function() {
    var href = $(this).attr('href');
    var anker = href.indexOf('#');
    var ankertext = href.substr(anker);
    var target = $(ankertext);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, scroll_top_duration);
  });
});

もちろん、以下のような普通のアンカーリンクでも対応可能。

<a href="#example">テストテキスト</a>

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

以前の方法がmac OS 10.12でやりにくくなってしまったため、新しい方法を試してみました。

こちらのexport_diff_zip.shを改善してみました。
フォルダは一個上の階層に出力されます。

SourceTreeでコミット間の差分ファイルを抽出しよう (カスタム操作を使う方法)

#!/bin/sh
if [ &quot;$2&quot; = &quot;&quot; ]; then
    git archive --format=zip --prefix=archive/ HEAD `git diff --diff-filter=d --name-only $1 HEAD` -o ../$1_HEAD_diff.zip
else
    git archive --format=zip --prefix=archive/ $1 `git diff --diff-filter=d --name-only $2 $1` -o ../$2_$1_diff.zip
fi

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'
	});
});