〔wordpress〕Ktai-styleで、ガラケー＆スマフォの画像表示（img width100％）etc…

/ Digipoke

ktai－styleでスマフォとガラケーの両方を運営するには、画像サイズをどうするか？ が問題でした。固定ページ、単一ページで、携帯（ガラケー＆スマフォとも）画像の横幅を100%で表示したいので試行錯誤しましたが、結論、スマフォとガラケーの画像を両方綺麗に表示する事が出来ませんでした。このページはスマートフォンを優先した妥協案のメモです。

(1)ガラケーのみktai-styleを利用する場合(PC+ガラケー）

ktai-styleの画像はサムネイルを表示しています。デフォルトでは96pxなので小さいです。「class=”ktai”」をimgタグに付与すると、PCで表示されている画像を表示するのですが、サイズが大きすぎて表示できない場合がありますので、フィルターでktai-style用に生成されるサムネイルサイズを変更しています。サイズは幅240pxが妥当のようです。（縦型の画像だと横幅はもっと小さくなってしまいます）

functions.phpに追加

2行目がサムネイルサイズ

[php highlight=”2″]
function my_thumbnail_max_size() {
return 240;
}
add_filter(‘ktai_thumbnail_max_size’,’my_thumbnail_max_size’);
[/php]

 

ktai-styleを導入済みの場合、既に投稿している記事の画像は96pxのままですので、uploadsフォルダの中の（ファイル名.ktai.拡張子）の画像を削除して再度アップロードする必要があります。

uploadsフォルダに生成される画像は、下記のようになっています（多分・・・）
  • 元データ画像（アップロード画像）
  • 大・中・サムネイル画像・ヘッダ用背景画像?
  • ktai用サムネイル画像
    ※元画像がgifデータの場合pngデータも生成、pngデータの場合gifデータも生成、jpg画像は３キャリアでOKなのでjpg画像のみ生成

ktai-style用の画像は、投稿後、携帯サイトにアクセスしたタイミングで生成されているようです。

 

(2)スマートフォンもktai-styleを利用する場合(PC＋スマフォ）・・・ガラケーを諦めた経緯

スマートフォン用テーマのfunctions.phpにサムネイルサイズ（my_thumbnail_max_size）のコードを書いて、ガラケーより先にアクセスすれば、スマフォ用テーマに設定したサイズで、サムネイルが生成されました。
この場合、ガラケーでは、容量がオーバーしていなくても、画像の横幅がオーバーしているので、altキーのテキストを表示しているか、画面からはみ出している？（未確認）

サムネイルサイズ（my_thumbnail_max_size）はMAXサイズなので、画像サイズを640にしているとして、縦型の画像を投稿したとき、縦640pxのサムネイルを生成しますので横はもっと小さくなってしまいます。

縦横640に満たない画像をアップロードすると生成されず元画像を表示します。この場合、まだサムネイルが生成されていない状態なので、その後、最初のアクセスがガラケーなら、ガラケーのfunctions.phpに追加したサムネイルサイズ（my_thumbnail_max_size）で生成されます。

つまり、ガラケー用に指定したサムネイルになるので、スマフォでアクセスすると画像が小さすぎてボケてしまいます。（imgのwidthを100％に設定していると）

結局、サムネイルを利用するのは諦めて「class=”ktai”」をimgタグに付与して元画像を表示させることにしました。

ガラケー、スマフォそれぞれ専用のサムネイルを生成して表示できれば一番なんですが。。。。投稿後、すぐにスマフォでアクセスして、スマフォ用に最適なサイズのサムネイルを生成させても、ガラケーでは、横幅が画面からはみ出して表示するか、サイズオーバーでaltキーに設定したテキストに置き換わることになります。（未確認）

手間をかけても、スマフォでもガラケーでも上手くサムネイルを表示させることはできないようなので、サムネイルを利用するのは諦めて「class=”ktai”」をimgタグに付与して元画像を表示させることにしました。つまり、ガラケーを諦めました。

「class=”ktai”」をimgタグに付与すると、PCで表示されている画像を表示するようになります。管理画面で画像をアップロードする時に、大サイズを投稿しておけば、スマフォでもボケない画像を表示できます。

（注）CSSで、固定ページ、単一ページのimgのwidthを100%に設定している事を前提に書いてます。

大サイズを投稿した場合の、PCの画像サイズをコントロールする

大サイズを投稿すると、PCに表示するには殆どの場合大きいです。これは入力エディター内で縮小して調整してやります。
画像をクリックすると左上にマークが出現するのでクリックすると、画像を縮小できる画面がアクティブになります。ここで縮小すると、リンク画像は大サイズ〔またはフルサイズ（元画像）〕でも、widthサイズとheightサイズがimgタグに付与され縮小画像を表示します。

imgタグに「class=”ktai”」を自動的に付与するコード

（PC用テーマのfunctions.phpに追加）

[php]
/**class=ktai**/
add_filter( ‘image_send_to_editor’, ‘remove_img_attr’ );

function remove_img_attr( $html ) {
$class = ‘ktai’;
return preg_replace( ‘!(<img[^>]+class=")!’, ‘$1′.$class.’ ‘, $html );
}
[/php]

 

ページに複数枚の画像を投稿した場合、スマフォでもガラケーでも、ページの全体サイズが容量オーバーすると画像を表示できません。

元画像を表示するので、スマフォでも容量オーバーすると画像を表示できなくなり、画像をaltキーのテキストに置き換えて表示します。（50KBくらいまで）
2枚くらいなら容量内に収まって元画像でも表示できるかもしれませんので、できるだけ容量オーバーにならずに画像を表示できるようにするために、元画像のサイズを抑えることにしました。

現状、スマフォでも見ぐるしくない程度のサイズ（横680pxくらい？）に大サイズを設定。もしくは、アップロードの際に任意のサイズにしてくれるプラグインを利用することにしました。クライアントが、大きな画像をアップロードする場合でも、縮小してアップロードしてくれるプラグインです。フルサイズがMAX680pxになるためサーバー容量を抑えることもできます。
（Resize At Upload Plus）

オフィシャルサイトより引用

画像のサイズが大きくてページの全体サイズが携帯端末の表示容量を越える場合は、画像を alt テキストの内容に置換して容量制限に収まるようにしています。複数の画像がある場合は、後ろの画像から順にテキスト化されます (前の画像を極力残します)。

 

その他のコードメモ
サムネイルの下に表示される「元画像にリンク」を削除したいとき、functions.phpに追加

（スマフォ・ガラケーそれぞれのテーマのfunctions.phpに追加）
※class=”krai”を付与して元画像を表示している場合は不要

[php]
function ks_keep_link_of_images($link_html, $orig, $href, $label) {
if (preg_match(‘/]*?src=/’, $label)) {
$link_html = NULL;
}
return $link_html;
}
add_filter(‘convert_links/ktai_style.php’, ‘ks_keep_link_of_images’, 10, 4);
[/php]

参照：Life is Really Short, Have Your Life!!

 

生成するサムネイルサイズを変更する場合に、ktai-style本体のファイルを書き換える方法

inc ディレクトリー　→　shrinkage.php（40行目付近のサムネイルサイズを変更）

[php highlight=”3″]
const COOKIE_IMAGE_INLINE = ‘image_inline’;
const THUMBNAIL_FILENAME = ‘.ktai’;
const THUMBNAIL_MAX_SIZE = 240; // use ktai_thumbnail_max_size filter to change this value
const GD_MEMORY_LIMIT = ‘256M’;
const SIZE_EXCEED_COLOR = ‘#808080’;
const MOBILE_SITE_CLASS = ‘ktai’;
[/php]

 

下記は調べ中のメモです

容量制限で画像がaltキーにならないように、スマフォのみ制限容量を大きくする

ページ内に1枚目だけ表示して、2枚目以降の画像はaltキーに変換されているので、下記のようにコードを追加してみたが変化なし（画像1枚分の制限だったら、変化なくて当たり前・・・）

デフォルト：50kb　→　1MBに変更

スマフォ用テンプレートのfunctions.phpに記述

[php]
<?php
function ks_set_direct_link_image_size($size) {
return 1;
}
add_filter(‘direct_link_image_size/ktai_style.php’, ‘ks_set_direct_link_image_size’);
?>
[/php]

 

デフォルトでは50kbを超えるとページを分割するので、これをスマフォのみ解除

bese.phpの、KtaiService_Touch classの部分に追加(2493行目付近)

[php]
public function __construct($user_agent) {
parent::__construct($user_agent);
$this->theme = ks_option(‘ks_theme_touch’);
$this->type = ‘TouchPhone’;
$this->page_size = ‘2097152’; // 1ページの容量を大きくしてページ分割を解除（元の値：1048576）
add_action(‘ktai_wp_head’, array($this, ‘viewport’) );
return;
}
[/php]

 

参考サイトURL
http://ja.forums.wordpress.org/topic/6357?replies=4
http://ja.forums.wordpress.org/topic/1748?replies=6
http://mtblog.ldblog.jp/archives/19105481.html

 

まだまだ分らない事だらけですが、覚書も兼ねて記事にしていますので、随時修正します。（wordpress3.5.1 / ktai-style2.0.5使用）

Ktai-style オフィシャルサイト　http://wppluginsj.sourceforge.jp/ktai_style/
すばらしいプラグインを無料で提供してくだっているIKEDA様に感謝です。できれば、スマフォ専用テンプレートを使用するときは、容量制限を解除（もしくは緩和）してもらえると嬉しいんですが。。。
functions.phpで別々に指定できるようになって欲しい。。。