# 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
cssスプライト的なパラパラアニメ用の画像を作るときのtips
cssスプライト的なパラパラアニメ用の画像を作る必要がある時のいろいろ逆引きメモ。
小さめの画像で作るとき
CSS Sprite Generatorがとても優秀。
photoshopで作るとき
大きめの画像は上記のウェブアプリだとダウンロードできないことがある。
画像を連番のレイヤーに並べたのちに、
こちらのスクリプトを使うととても便利でした。
http://www.openspc2.org/projectX/Photoshop/0086/
iphoneやAndroid2.3でもちょっとはマシな背景画像fix方法
iphoneやAndroid2.3で背景画像固定を実現する方法のメモ。(要jQuery)
まずは横幅640px
縦幅適当（iPhoneの縦の高さをカバーできるくらい）の画像を用意。
html
<html> <header> <!--略--> </header> <body> <div id="main"> <p>コンテンツ</p> </div> </body> </html>
js
これで背景画像を追加してます
$(function(){
$('body').prepend('<img src="img/bg_sub02.jpg" id="allBg">');
});
css
背景画像をfixedさせて、z-indexをメインのコンテンツより下に。
メインのコンテンツを背景画像よりz-index上にしてposition:relativeする。
横幅を100%にするかはお好みで。
/*body*/
body{
background-color: #000;
}
/*背景の設定*/
body #allBg{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#main{
position: relative;
top: 0;
left: 0;
z-index: 2;
}
.htaccess が見れないサーバーでも Filezilla を使えば表示させることができる
ソーシャルボタンをきれいに横に並べるスニペット
ソーシャルボタンをきれいに横に並べるのに嵌ったので……。
ソーシャルボタンは種類が多いし、ときたまソースが変わるので、これがいつまで持つかはわからないのですが。
<div id="social">
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="facebook">
<div class="fb-like" data-href="http://example.com/" data-width="80" data-layout="button" data-show-faces="false" data-share="false"></div>
</div>
</div>
#social img {
width: 100%;
line-height: 0 !important;
vertical-align:top;
}
#social .facebook,
#social .twitter{
display: inline-block;
height: 20px;
overflow: hidden;
line-height: 0 !important;
vertical-align:top;
width: 80px;
text-align: right;
}
#social .facebook {
width: 70px;
}
#social .facebook span{
vertical-align:top !important;
}
Colorboxの改造メモ
ライトボックス系プラグインで扱いやすいcolorboxと改造したのでメモ
Colorboxの表示画像にaltを追加したい
まずはリンク元にtitleをつけておく（ここまでは標準機能でタイトルを表示させる方法と同じ）
jquery.colorbox.jsを開きます。
979行目にこちらの一行を追加。
.attr('alt', settings.get('title'))
キャプションのみ非表示にする
837行目辺りのここをコメントアウト。
キャプション表示機能をオプションでfalseにすると、alt自体も無効になってしまうので。
// $title.html(settings.get('title')).show();
リンク元をtitleでなくaltで設定したい
86行目辺りを以下のように改造。
title: function() {
// return this.title;
return $(this).attr('alt');
},
alt以外にキャプションも設定したい
リンク元に
data-caption=”キャプションの文言”
を追加
90行目辺りにこれを追加
caption: function() {
return $(this).data('caption');
},
840行目辺りのここを改造。
キャプション表示機能をオプションでfalseにすると、alt自体も無効になってしまうので。
// $title.html(settings.get('title')).show();
$title.html(settings.get('caption')).show();
Android2.3で画像をズームアニメーションするときのバグ
Android2.3で画像をズームしていく、みたいな演出をする時。
こんなかんじのソースを書いたのだけど。
$(window).on('load',function(){
var gameW = $('.gameWrap').width();
$('.gameWrap').css('height',gameW);
$('.gamebg').animate({width:gameW*3,top:-gameW,left:-gameW},3000);
});
実際の画像のサイズ以上に拡大すると表示がバグった。
元から画像サイズを一番ズームしたい状態と同じ解像度で書き出して、
通常時は縮小表示してやるようにしたら治った。
例えば幅640pxの画像を三倍にズームしたい場合、
用意する画像は1920pxであればよい。
画像書き出しの際には、幅640pxの画像と同じ重さになるまでがっつり圧縮をかけてやる。
retinaディスプレイ対応の際に、2倍サイズの画像を高い圧縮率で保存して、1/2に縮小して使うという方法が提唱されていたのだけど、それと同じ考え方ですね。
参考サイト様
Retina revolution
要素を表示したり消したりの一覧
jQueryでアニメーションをする時、要素を表示したり消したりする手段がいろいろあるのでメモしました。
/*透過を含む画像はIE9以上で使いましょう*/
.show(1000);
.hide(1000);
.fadeIn(1000);
.fadeOut(1000);
.animate({opacity:'1'},1000);
.animate({opacity:'0'},1000);
.css({opacity:'1'});
.css({opacity:'0'});
/*IE8でもOK*/
.css({visibility:'visible'});
.css({visibility:'hidden'});
.css({display:'block'});
.css({display:'none'});
JavaScriptでスマホサイトの振り分け
indexページのみスマホサイトの振り分けをする、ということをたまにやるので、その方法のメモ。
<script type="text/javascript">
(function () {
var url = window.location.href;
var urllast = url.substr((url.length-1));
if(urllast == '/'){
url = url + 'sp/';
}else{
url = url + '/sp/';
}
function link(){
location.href=url;
}
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);
}
}());
</script>
スマートフォン用にアニメーションをjQueryとcss3で作ったので便利だったページをメモ
PCサイト用のFlashをスマートフォン用にjQueryとcss3で書きなおしました。
便利だったページをメモします。
基本機能を確認
jQueryの日本語リファレンス
http://js.studio-kingdom.com/
jQueryのイージングプラグインの動きまとめ
http://easings.net/ja
CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）
http://www.flapism.jp/html/416/
ベンダープレフィックスの扱い
ベンダープレフィックスの整理整頓
https://w3g.jp/blog/vendor_prefix_cleaning
ベンダープレフィックスの順序
http://kojika17.com/2013/02/ordering-vender-prefix.html
Androidの限界
@keyframesとAndroid（CSS3のアニメーションのバグのまとめ）
http://blog.webcreativepark.net/2012/02/12-141313.html
Android2.3ではCSS3でイージングは使えないみたい。
回転軸の指定とかも難しいかも。
あと、Android2.3ではメモリの限界？で、同一画面内で複数箇所以上アニメーションさせると動かなくなりました。
どの要素をアニメーションさせるか取捨選択は必要ですね。