2014年05月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

cssのfilterプロパティでbrightnessの挙動がiOS6でおかしい

css3のfilterプロパティというものがある。
W3Cでは現在wokingdraft状態のもの。

 
詳しい使い方は、まとまっているブログがいくつもあるので
このあたりとかを見てもらえればいいとして、 

filterの中のbrightnessという明度をコントロールする関数の挙動が
iOS6のsafariとiOS7のsafariでまったく違うという現象があった。


filterは、いまのところ、webkitのプレフィクスを付ける必要があり、
書き方としては以下のようになる。

img.picture{
-webkit-filter:brightness(100%);
}


pictureというclassのついた画像の明度をコントロールしたい場合
 
-webkit-filter:brightness(100%);

がもと(オリジナル)の状態。

-webkit-filter:brightness(0%);

にすると真っ黒になる。
明度が0ってこと。


100%を超えた数値をいれていけば明るくなっていって最後は真っ白になる。
(実験したところ2000%くらいで真っ白になった)


これはW3Cでも規定されている正しい挙動。


これがiOS6のsafariなどでみると以下のようになってしまう。

brightness(0%) → オリジナルの状態(明度の加工なし)
brightness(100%)→明度MAXで真っ白
brightness(-100%)→真っ黒

 
そのため、無加工のオリジナルを表示するつもりで
brightness(100%)を設定すると、iOS6のsafariでは、真っ白になってしまうっぽい。

今のところ解決策は見つかってない。

誰か知ってたら教えて。

(ちなみに今回は、brightnessを使わないで画像そのものを差し替える、という方法で解決させました) 

jQueryでアニメーションが終わった後に次のアニメーションを始める

jQueryでアニメーションするときによく使うのがanimate()メソッドだよね。

jQuery animateのリファレンス 


書き方としては、たとえば

js
$(".block").animate({
opacity:1,
width:230
}); 

みたいな書き方をすると、 
html
<div class="block">にゃお</div>

がフェードインしてきて横幅が230pxになっていくアニメーションをつくることができる。

 
実際javascriptでのアニメーションを入れるときは、いくつものアニメーションを作ることになるのだけれど、1つ1つ順番にアニメーションさせたいんだ!っていうときがよくある。

1つのアニメーションが終わったら、それをトリガーとして次のアニメーションを始めたい。


animate();には、ちゃんとそのコールバックの仕組が用意されてる。

animate()の(カッコ)の中には4つの引数をいれられる

こんな感じ

animate(パラメータ,アニメーションの長さ,イージング,コールバック);

パラメータというのが具体的なアニメーションの内容。
上記の例でいうと、
{
opacity:1,
width:230
}
というのがこれにあたる。
(オブジェクトリテラルという書き方)

アニメーションの長さは、500とか1000とかミリセカンドを単位として入れる。

イージングはアニメーションの動き方というかなんというか、
説明がめんどいから、ここを見るとわかると思う。


そして4つ目の引数がコールバック。

これが、「次の指示」ってやつ。


ここにfunctionなどを入れれば、次のアニメーションをスタートさせることができる。

例えば以下の様な感じ。

$(".block").animate({
opacity:1,
width:230
},500,"linear",nyaonyao); 

function nyaonyao(){
$(".photo").animate({
top:100,
width:1000
},1000,"swing"); 
}

4つ目の引数(コールバック)で、nyaonyaoという関数を実行してる。

これによって、

まず.blockのアニメーションが動いて、それが終わったら
.photoのアニメーションが動くようにできるよ。


これをどんどんつなげていけば、順番にアニメーションしていく動きが作れるっ!!

レディオ!



 

wordpressをディレクトリ内にインストールして親(ルート)にページを吐き出させるやりかた

wordpressをサーバーにインストールするとき、管理上
「wp」とか「admin」とかいったディレクトリ内にwordpressのソースたちをアップしてインストールしたい。

http://nyannyan.comというサイトの管理ページが
http://nyannyan.com/adminにしたい、という感じ。

ディレクトリもスッキリするし、お客さんにもわかりやすいのでこうしたい。

でもwpって、初期状態だと、インストールした先がトップページになっちゃう。
http://nyannyan.com/adminにインストールしたら
http://nyannyan.com/adminがトップになっちゃうね。


なので、トップをちゃんとルートの
http://nyannyan.com/
にするための手順をメモ。

といっても超簡単。

まずは、/adminにインストールされてる状態でwp管理ページにログインして


①設定をクリックして、「サイトアドレス(URL)」がhttp://nyannyan.com/adminになってるので、adminをとっぱらってhttp://nyannyan.comにする。

②FTP接続し、
admin/にある2つのファイルをダウンロードしてくる。
・.htaccess
・index.php

③ダウンロードしたindex.phpをエディタでひらいて
require(‘./wp-blog-header.php’);
というのを見つけ出して
require(‘./admin/wp-blog-header.php’);

に変更する。

④ FTPで2つのファイルとルートディレクトリにアップする。


これでOK.

簡単。



◆固定ページなどが403エラーになったら?

URLを変更した後で、固定ページをみるとエラーになる場合がある。
そんなときは、固定ページで吐き出そうとしているurlのディレクトリがすでに
サーバー内に存在してないか確認する。


http://nyannyan.com/about/

がエラーになったとしたら、

aboutというディレクトリがサーバー内で作られちゃってないか確認。
作られちゃってたら削除する。

最初に静的にhtmlをつくって運用している場合などはディレクトリが残っている場合が多いから、バックアップをとったうえで、ちゃんと削除する。

するとwordpressが吐き出すページとバッティングせずにちゃんと表示されるようになる。



 

警告メッセージ「event.returnValue is deprecated. Please use the standard event.preventDefault() instead.」がchromeのDeveloper toolsで出る

jQuery本体が出してるwarning(警告。エラーってほどじゃない)なので気にしないでいいんだとさ。
jqueryerror


最新のjQueryではすでに解決されてるそうです。



http://yuzuemon.hatenablog.com/entry/2013/10/10/025810 

wordpressで記事一覧を出す

wordpressで記事一覧のタイトルを出したいとき。

<?php
$posts = get_posts('numberposts=0');
global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<?php the_title(); ?>
<?php endforeach; endif;?>

numberposts=0

を5とかにすれば5件でる。 

記事の日付も出したいときは
<?php the_time('Y年m月d日'); ?>
を使う。 

記事へリンクをつけたいときは
<a href="<?php the_permalink(); ?>">
を使う。

 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ