ブログ Archives - 2ページ目 (2ページ中)

WordPress：Auto Post Thumbnailが動かないとき

Posted on 2013/03/07

今お客さまのブログをアメブロからWordPressに移植しています。
その時にアイキャッチ画像の登録が面倒ですので、プラグインで記事中の写真をアイキャッチ画像に登録することにしました。
使用するのはAuto Post Thumbnailなのですが、インストール・有効化したあとに「Generate Thumbnails」のボタンを押しても何も起こりませんでした。

ちなみにAuto Post Thumbnailのバージョンは3.3.1、WordPressは3.5.1です。

端折って結論です。
プラグインファイルauto-post-thumbnail.phpの119行目

$("#message").html("<p><strong><?php echo js_escape( sprintf('All done! Processed %d posts.', $count ) ); ?></strong></p>");

のjs_escapeをesc_jsに書き換えてやるだけです。

$("#message").html("<p><strong><?php echo esc_js( sprintf('All done! Processed %d posts.', $count ) ); ?></strong></p>");

こうですね。

これで、各記事にアイキャッチ画像を設定できました！

FLASHのアニメーションをiPadに対応するために3つのツールを試してみた

Posted on 2013/02/01

元のswfデータについて

お客さまがこれまでトップページに使用していたアニメーションの概要は、割りと単純なアニメーションで、最初に画像がスライドして、スライド終了でテキストやボタンがスライドインしてきます。

それぞれのボタンに応じてさらに簡単なアニメーションが紐づけられているというもので、タイムラインアニメーションとアクションスクリプトを使用したアニメーションが組み合わされていました。

今回の要件

・iPadやiPhoneでもアニメーションが表示されるようにしたい。
・アニメーションは現状のものを再現する
・対応ブラウザはie6まで含む(!)

以上のことから、iOS用のみ別ページを表示させる方向で、その他のブラウザの場合は現状のswfを表示させることになりました。

Google Swiffy, Adobe Edge Animate, Tumult Hypeの3つが候補

ほんとはFlash CS6 + Create JSも考えていたのですが、アクションスクリプトが使用されていたので除外しました。
細かく調整すればいけるのかもしれないですが、今回はパスです。

Swiffyは期待していなかったけど予想以上

初めに試したのはSwiffy。

https://www.google.com/doubleclick/studio/swiffy/

Google Swiffy

上のページに行って、swfファイルを選択して「upload and convert」ボタンを押すだけ！！
元のswfと変換後のデータが表示されます。

あれ、なんかほとんど完璧。これでいいんじゃない？とか思ったんですが、いくつか課題が。

まずは、シェイプに光彩などのフィルタがかかっているところが、モノによって表示されていない。ややこしいことに同じ設定でも表示されているモノもありました。
→これはオブジェクトをpng画像にすることで解決
スクリプトで制御されていたボタンの挙動が微妙に再現されてない。
→これはiPadでは問題がなくて、MacのSafariだけでしたので、結果オーライだけど、他のデータでどうなるか。
背景がスライドしつつコピーテキストがフェードインしてくるところでアニメーションがもたつく。

お手軽で、かなり再現性が高いので、場合によっては使えるのではないかと思いました。
あと、書き出されるデータがhtml１つというのもスッキリしてて好きですね。

Adobe Edge AnimateはFlashを使ったことがあれば使いやすい

2013/2/1現在は特別提供期間として、永久ライセンス付きのEdge Animateが無料で入手できますので、まだ持ってない方はインストールしておくと良いかと思いますよ。
Edge Animateは499USドル（永久ライセンスの場合）、あるいは月額14.99USドル（単体サブスクリプションの場合）相当の製品とのことです。（http://html.adobe.com/jp/edge/animate/faq.html）

edge

FLASHと似たタイムラインですので、分かりやすいです。
ピンというのの使い方が作業効率化のカギかと思うのですが、どっちに持ってきたらどっちだっけ？と毎回悩んでしまっています。

アニメーションはSwiffyのようにもたつくこともなく、スムーズに動いてくれました。

一点、分からなかったのが１つのエレメントに複数のイベントを設定する方法です。
今回は必要なかったのですが、たとえばmouseoverとclickの二つを設定したいと思っても、イベントの選択ができませんでした。

実は一番気になっていたのがHype

使いやすそうなのと、IE6まで含む幅広いブラウザに対応しているということで気になっていたTumult Hypeを、この機会に試してみることにしました。

Hype

カテゴリ: グラフィック&デザイン
価格: ￥5,200

最初にとまどったのがタイムラインの上に表示されている時間。上のイメージでの表記は00:07.25。タイムラインの目盛りは7.75秒くらい。
なんだろう？30で1秒ってバグか？とか思ってたんですが、小数点以下はフレーム数でした。30フレーム/秒なのでこういう表記らしいです。7秒25フレーム。ちょっと気持ち悪いですが、分かってしまえば問題ないですね。

Hypeでは複数のタイムラインを作れます、ということだったので、Flashでいう個別のシンボルとかがタイムラインを持ってるのかと思ったらちょっと様子が違って、メインのタイムラインとの関係が今ひとつつかめていません。
ボタンをクリックしたらサブのタイムラインを動かす感じの使い方なんですが、メインとサブが入れ子になってるわけではないので、サブのタイムラインで作業していたらメインのタイムラインにも影響してるような。
なんかまだよくわかりません。

シーンというのを切り替えることで、難しいコードを書くことなく、インタラクティブなアニメーションコンテンツが作れる、というのがHypeの特長なのかなという気がします。
実際、このボタンをシーンAで押したらシーンBに、シーンBで押したらシーンCに、みたいな作り方をしたらすぐに完成しました。

ただ、今回は比較的単純なアニメーションでしたので良かったのですが、もう少し複雑になってシーンがどんどん増えて行ったらちょっと管理が大変かもしれないですね。あと修正が入った時の対応も大変な気がします。

手っ取り早くリッチなアニメーションコンテンツが作れる、っていうのは間違いないですね。
値段もそんなに高くないですし。

まとめると

時間がない、予算がないならまずswiffyを試してみましょう。
FLASHに慣れているならEdgeが分かりやすいです。
古いブラウザまで対応する必要があって、しかも簡単にということならHypeしかないですね。

WordPress:カテゴリアーカイブにカスタム投稿タイプも追加した一覧ページでページングにハマった

Posted on 2012/08/30

ニュースカテゴリの一覧ページを作成していて、そこにカスタム投稿タイプの記事一覧もあわせて表示させました。
クエリ自体は問題がなくposts_per_page=-1にすれば、すべてが取得できています。

しかし、ページ送りをしようとすると2ページ目以降でページがありません、と404が返ってきてしまうという症状で悩みました。

ページ送りは、よく使っているこちらのコード。

WP-PageNavi を使わずにナビゲーション表示 (改良版)

で、今回はそれをfunctions.phpに置くのを使わせていただきました。
ページナビゲーション機能を改版してみたり

このコードは通常のカテゴリ一覧などでこれまでに何度も使用しているので、問題ないはずなのですが、カスタム投稿タイプが絡んでるのが原因なのかよくわからないのですが、2ページ目以降で404。ただposts_per_pageの値をいじってみるとどうやらページ数はちゃんと合っています。

それで、結論から言えば、パーマリンクの/category/news/page/2/などと表示されるものを/category/news/?page=2と変えたらいけました。

試したけど今回効果がなかったものは、

・Top Level Categories Fixプラグイン
・Custom Post Type Category Pagination Fix
・表示設定の「1ページに表示する最大投稿数」を1にする

などです。

先の吟遊詩人さんのコードがこれ

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;
 
  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('paged', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    user_trailingslashit('page/%#%/', 'paged');;
    $paginate_base .= '%_%';
  }
 
  $result = paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 5,
    'current' => ($paged ? $paged : 1),
  ));
 
  return $result;
}

そして、最終的にfunctions.phpにかいてあるコードはこれです。

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;

  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('page', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    untrailingslashit('?page=%#%', 'paged');;
    $paginate_base .= '%_%';  
  }

  $result = paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 5,
    'current' => ($paged ? $paged : 1),
  ));

  return $result;
}

微妙に変わってます。
9行目と13行目だけか。。あんなにもがいたのに。
まぁ意図どおりに動かせたので良しです！

Illustrator：ピクセルパーフェクトを実現するために「ピクセルグリッドに整合」をチェックするよりも前にチェックすべきたった１つのこと

Posted on 2012/05/31

いろんなところで、ピクセルパーフェクトな画像書き出しをイラレで実現するためのTipsが書かれているにもかかわらず、あまり気づかれていない気がするので書いておきます。
どなたかが書かれていましてもやさしく教えていただければと思います。

通常イラレでデザインを行いますとアンチエイリアスがかかって輪郭がぼやけてしまいます。
印刷用データなどでしたら問題ないのですが、Webで使用を使用する場合には「変形」パネルの「ピクセルグリッドに整合」にチェックをいれたり、0.5ピクセル単位で調整をされたりしているのではないかと思います。
それにもかかわらず、スライスのサイズよりも1ピクセル大きく書き出されてしまうようなことはないでしょうか？例えば、200px四方のスライスを書き出したら201*200pxの画像が書き出されていたとか。

これはアートボードの位置の設定に起因しています。
「ウィンドウ」-「アートボード」からアートボードパネルを表示して、下図のように「アートボードオプション」を選択します。

開いたダイアログの「位置」に小数点が含まれていたら整数に直してください。

ちゃんと確認してないですが、たぶんこれをきちんと設定していると、0.5ピクセルとかで調整する必要がないのではないかと思います。
少なくとも、私はそういう細かい調整をしていないです。
「アートボードの位置を整数に」＋「ピクセルグリッドに整合」でピクセルパーフェクトになるかと思います。
モヤモヤしていた方、一度お試しください。

CS3か4か5かいつからか分からないですが、アートボードを複数作ることができるようになりましたが、アートボードを追加すると新しいアートボードの位置はピクセルグリッドに沿ってくれません。
これがデフォルトでピクセルグリッドに合わせてくれたらいいんですけど、このためにクライアントから送られたデータを毎度チェックしなければいけません。
最近、いくつもの案件で各ページをそれぞれのアートボードに入れてくれたりするので、この作業だけでも半端無いんです(^^ゞ

Word：数式エディタ内で項目の縦位置を微調整する方法

Posted on 2012/04/26

なんとも細かい話なのですが、できることがわかってちょっとうれしかったのでシェアしておきます。
そうそう需要ないとおもいますが。。

今回入力した数式は次のようなものです。

G≧の位置がだいぶ上にいってますよね。
おそらく根号の中の分数のラインと合わせる仕様になっているのだと思います。
ただ、ちょっと気持ち悪いので上下中央にセンタリングできる方法はないかと調べていたら、こちらで教えていただきました。
Inner Journeys

調整したい項目（今回はG≧）を選択してcontrol+↓。
上下左右どこにでも移動できました。
数式エディタ使いにくいと思ってましたが、これで少し自由になれた気がします。

調整後のイメージはこちら

PHP：PDFのファイルサイズを取得して表示するのにはまったので解決策を

Posted on 2012/04/19

IR情報などPDFファイルのリストを作成することはよくあると思いますが、ファイルのサイズを表示したいという要望は多いのではないかと思います。
PHPにはfilesize()というそのまんまな関数があって、ファイルサイズを取得し、単位を出力するスクリプトを参考に下記の関数を作りました。ってほぼコピペなんですけど。

［追記］
WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました。末尾のコードご参照ください。(2015/01/19)

あと、プラグイン化してショートコードで使えるようにしましたのでよかったら使ってください。
WordPress：PDFとかのファイルサイズを取得して表示するショートコードを公式ディレクトリに公開しました
WordPress.orgのPlugin Directory:
Get Filesize Shortcode

function get_file_size($file){
	if ( is_file($file) ){
		$filesize = filesize($file);
		$s = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
		$e = floor(log($filesize)/log(1024));
		if($e==0 || $e==1) { $format = '%d '; }
		else { $format = '%.1f '; }
		$filesize = sprintf($format.$s[$e], ($filesize/pow(1024, floor($e))));
		return $filesize;
	}
}

このとき、get_file_sizeに渡す引数$fileはカスタムフィールドにあるpdfファイルのurlになります。
http://www.ika-ring.net/aaa.pdfみたいなのです。

ですが、このままだと
Warning: filesize() [function.filesize] : stat failed for…….
というエラーが出てしまいます。もうだいぶググったのですが、サクッと理解できるようなものがなかったので書いとくことにしました。
is_file($file)とかで見てもfalseが返ってくるので、さっぱり分かりませんでした。

それで、答えはこのページにありました。
WordPress and the “filesize() [function.filesize]: stat failed” Error

最初二つのコードでなにが変わったのか分からなかったのですが、要はfilesize()やfiletype()などに渡す引数はURLではなくてサーバーのディレクトリーパスを渡せということです。フルパスっていうんでしょうか。
ということで先の$fileからstr_replaceでディレクトリーパスに書き換えることで無事できました。
以下、完成版コードです。
もっといい書き方があったら教えてください。

function get_file_size($file){
	/*教えていただいたように記述を変更しました。
	$mfile = str_replace( 'https://ika-ring.net','/usr/home/somedirectory/www/htdocs',$file );*/
	$mfile = str_replace( esc_url(home_url('/'))."wp/",ABSPATH,$file );
	if ( is_file( $mfile ) ){
		/* WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました */
		$filesize = size_format( filesize( $mfile ) );
		return $filesize;
	}
}

Dreamweaver CS5のコードヒントカスタマイズ [backface-visibility]

Posted on 2011/12/16

Dreamweaverを使っていて重宝するのがコードヒントという機能です。
例えば、cssファイルを編集しているときに、cと入力するとclear,color,….と入力候補が表示されるやつです。
ただ、いらない、というかほとんど使わない項目もアルファベット順に出てきてしまうというイラつきがあります。
よくあるものだとwidthを出したいのに最初にwidowsなんてのが出てくるために、widtまで入力しないといけなかったりします。つぎにhキーを打つかreturnキーを打つかの差しかなかったりするわけです。

それなら設定ファイルを変えてしまえというわけで、BUN:Logさんなどいろいろな方が、設定ファイルを配布してくださってます。

ただ、どうもこのファイルだけでは治っていない項目があり、私の場合は結構ひんぱんに入力するものなのでなんとかしたいと思っていたのが、ようやく対処できたのでご紹介します。大したことないですが。

私がよく使うっていうのは、background。みなさん使いますよね？
でも、bってうつと backface-visibility ってのが最初にでてきます。
少なくとも今のところ使うことはないので、最初に出るのがbackgroundになったら気持ちいいです。

この設定は
/Applications/Adobe Dreamweaver CS5/Configuration/CodeHints/CSS3_hints.xml
にあります。
このファイルをコピーして、
/Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeHints/
の中にペーストします。
それでこのコピーしたファイルを開いて、770行目くらいにある

 <menuitem label="backface-visibility" value="backface-visibility:" icon="shared/mm/images/hintMisc.gif" />

をいじります。
今回は、のちのち状況が変わって使われることがあるかもしれないなぁという思いもあって、コメントアウトや削除はしない方向でいきます。
要はbackgroundよりも後に表示されたらよいので、labelを
label=”backface-visibility”
から
label=”bf-visibility”
とかに変えてしまいます。

以上。DWを再起動したらOKです。
bでbackgroundが出るようになったー。

一語変えただけのファイルに需要があるかどうか分かりませんが一応置いときます。
CSS3_hints.xml.zip [Dreamweaver CS5]

ほかにも、CSS3関連でまだ必要ないものはこのファイルで修正できると思います。
最後は、BUN:Logさんにならって、
「ご利用は、自己責任でお願いします。」

subやsupでline-heightがズレるのを防ぐCSS

Posted on 2011/12/04

備忘録として。
下付き文字のsubタグや上付き文字のsupタグを使用すると、行送りが通常よりも広くなりブサイクになる。
それをfixするためのcss指定。

出典：CSS Advisor

<style type="text/css">
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}
</style>

iBooksの辞書の辞書は英和辞書だった

Posted on 2011/12/03

iPadやiPhoneのiBooksで英語の本を読んでる時に、辞書を引くとなぜか英英辞書が表示されます。

いろいろとハック的に英和辞書を使えるようにする方法が紹介されているようでしたが、辞書の中でさらに辞書を引くと英和辞書で引けました。これって周知なのだろうか？

ちょっとモヤッとするけど、新鮮だったので紹介しておきます。

追記：どうやらアップデートで英和辞書のなかのテキストが選択できなくなってしまった。代わりに「Webを検索」と「Wikipediaで検索」のボタンが追加されてるけど、辞書が選択出来たほうがいいなぁ。

PowerPoint2003：グラフの色を好きな色にカスタマイズする方法

Posted on 2011/06/06

先日、仕事で必要に迫られて使用したTipsをご紹介します。
対象バージョンはPPT2003です。Wordでも同様に使用可能ですが、Excelでは少し問題があります。
2000以前のバージョンは検証していません。
正直なところ、最近のバージョンではどうなのか分からないので、このTipsがどれほど役に立つのかわからないのですが、私のお客さんはまだ2003のバージョンを使われているところがそこそこあるようですので、備忘録も兼ねて紹介しておきます。

マイクロソフトのオフィスを使っていて、ストレスを感じるのが色の選択ですが、特にグラフに関しては選択肢が少なすぎると思います。

今回は、それを克服する方法です。あらかじめ申し上げておきますが、めんどくさいです。

それでは始めます。

グラフをダブルクリックして選択状態にします。
メニューの「ツール」-「オプション」を選択します。
「色」タブを選択します。ここで既存の色を選択して、「変更」から好きな色を選ぶことでカラーパレットを自分の好みのものに変えることができます。
ただし、ここで気をつけるのは、変更するのは上の「標準色」のみにしてください。「グラフの塗りつぶし」や「線の色」を変更した場合、一度グラフの編集モードから出て、再度グラフをダブルクリックした際に、元の色に戻ってしまうことがあります。
データ系列の色を変更して、輪郭線をなしにしたり、わずかにグラデーションをかけたりして、完成になります。グラデーションをあまりきつくかけないようにご注意ください。

重要なのは、このカラーパレットのカスタマイズは、各グラフ固有のものであるという点です。
複数のグラフがあった場合に、全て設定をする必要があります。
冒頭に申し上げたエクセルでは少し問題があるというのは、エクセルの場合カラーパレットをカスタマイズするとブック全体に影響してしまうようです。
逆に言えば、全ての色を統一させられるということでもあるので、一長一短であるといえるでしょうか。