EC-CUBE2.13をMySQL5.7にインストールする時の注意点

デフォルトのEC-CUBE2.13をMySQL5.7を利用してインストール出来ません。

下記ファイルを修正する事で、回避できます。

data\class\db\SC_DB_DBFactory.php 内の下記部分を修正

$objQuery->exec(‘SET SESSION storage_engine = InnoDB’);

$objQuery->exec(‘SET SESSION default_storage_engine = InnoDB’);

GoogleのPageSpeed Insightsの画像判定はおかしい?

前回の記事でGoogleのPageSpeed Insightsでのモバイル画像の警告が気になって仕方がないので、とことんテストしてみる事にしました。

今度はDevicePixelRatioを表示を追加してテストしてみました。

テストした結果は下記の画像。

PageSpeed Insights_1

PageSpeed InsightsのモバイルはDevicePixelRatioは2xで判定しているようです。

ソースは下記にしているので、画面は320pxですが2xなので640pxの画像が表示されます。

[code]

<img src="img/2000w.jpg" srcset="img/320w.jpg 320w, img/360w.jpg 360w, img/640w.jpg 640w, img/768w.jpg 768w, img/800w.jpg 800w, img/980w.jpg 980w, img/1280w.jpg 1280w, img/2000w.jpg 2000w" alt="srcsetのテスト">

[/code]

現状のスマートフォンは、DevicePixelRatioが2xどころか3x等、ディスプレイの性能はかなり高くなってます。

GoogleのPageSpeed Insightsのモバイルは2xで画像を表示させているのは妥当だと思います。

では何故『圧縮してサイズを変更すると 20.3 KB(75%)削減できます。』のような修正を考慮が出てくるのか?

ここはとことん実験してみるしかない!

という事で試してみました。

下記結果は、320pxと640pxの画像をそれぞれ圧縮率80%のJPGで出力しました。

320pxの画像は問題ないですが、640pxの画像で『修正を考慮』が出てます。

で、640pxの画像を10%ずつ圧縮率を下げてはチェックを続け、ようやく20%で『修正を考慮』が消えました。

画像のファイルサイズを確認、320pxが10KB、640pxが5KB。

要するに、GoogleのPageSpeed Insightsのモバイル画像のチェックは、320px以下の画像はOKだが、2x用に作った640pxの画像は、ファイルサイズを1/2にしないとOKが出ない事がわかりました。

しかし、640pxの画像ファイルサイズを1/2にすると流石に荒くて見れたものではない。

実際スマートフォンで確認しました、DevicePixelRatioは3xです。

スマートフォンで見たとき

640pxの画像は荒くて見られたものではないです。

結論!

 

今やモバイルデバイスの解像度はかなり良くなってきてます。

当然!性能が良いディスプレイ端末を持っていれば綺麗に見たいのが当然でしょう。

なので、今のところGoogleのPageSpeed Insightsのモバイル画像のチェックは使えません。

画像の『修正を考慮』表示されても、今のところは無視するしかないでしょう。

今後、PageSpeed Insightsの精度が上がる事を期待します!

 

srcset属性を試してみました。

GoogleのPageSpeed Insightsで合格点が欲しくて、色々ググってましたら、imgタグにsrcset属性なるものがあるそうな。

画面サイズで画像が切り替えるらしい。

picture要素も同じことが出来るとの事。

早速試してみました。

先ずはsrcset属性からテスト、画像を適当なサイズで作って、body内のタグは下記で。

[code]
<img src="img/2000w.jpg" srcset="img/320w.jpg 320w, img/360w.jpg 360w, img/620w.jpg 620w, img/768w.jpg 768w, img/800w.jpg 800w, img/980w.jpg 980w, img/1280w.jpg 1280w, img/2000w.jpg 2000w" alt="srcsetのテスト">
<script async src="picturefill.js"&gt;&lt;/script>
[/code]

PCで各ブラウザでチェック、Chromeだけ若干挙動がおかしいが、一応画像は切り替わってる。

今度はスマートフォンでチェック。

おかしい、980w.jpgが表示されてる、何で?

その後、2日間悪戦苦闘しましたが、わかりました。

320wとか360wとか設定してる数値は、PCでは画面サイズ、スマートフォンではピクセルサイズだった。

これは使えません。

今度はpicture要素。

[code]
<picture>
  <source media="(min-width: 980px)" srcset="img/2000w.jpg">
  <source media="(min-width: 768px)" srcset="img/1280w.jpg">
  <source media="(min-width: 640px)" srcset="img/640w.jpg">
  <source media="(min-width: 360px)" srcset="img/360w.jpg 1x,img/640w.jpg 2x">
  <source media="(min-width: 320px)" srcset="img/320w.jpg 1x, img/360w.jpg 2x">
  <img src="img/2000w.jpg" alt="pictureのテスト">
</picture>
<script async src="picturefill.js"></script>
[/code]

PCのブラウザチェック、やはりChromeだけ若干挙動がおかしい。

スマートフォンでチェック、今度はOK!

いやしかし、1xというのが効いてない。

GoogleのPageSpeed Insightsでチェックすると2xの360w.jpgが表示されてる。

PageSpeed Insights

これではPageSpeed Insightsで合格点は出ません。

PCのブラウザ画面サイズが320pxでは320w.jpgが表示されているのに、PageSpeed Insightsでは360w.jpgが表示されてる。

今はsrcset属性もpicture要素も使えそうにないですね。

PHPで特定のページをSSLにリダイレクトする方法

PHPで特定のページをSSLにリダイレクトする方法を備忘録として記録です。

[code]
<?php
if (empty($_SERVER[‘HTTPS’])) {
header("Location: https://{$_SERVER[‘HTTP_HOST’]}{$_SERVER[‘REQUEST_URI’]}");
exit;
}
?>
[/code]

ホームページにブログの新着記事を表示させる方法

ブログの新着記事の一覧をホームページに表示させたいときがありますよね。

Google AJAX APIを使えば簡単に表示させることができます。

下記Javacriptをページに記述します、<body>内でもOKです。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script >
<script type=”text/javascript”>

//Google Feed Api
google.load(“feeds”, “1”);

function initialize() {

// ブログのRSSを設定
var feed = new google.feeds.Feed(“RSSのURL”);

// 記事タイトルの表示文字数を30文字に設定
var maxTitleLength = 30;

// 記事タイトル取得件数を10件に設定
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed1”);
for (var i = 0; i < result.feed.entries.length; i++) {

// 記事タイトルを取得
var entry = result.feed.entries[i];
var title = entry.title;

// 記事タイトルを文字数調整
if (title.length > maxTitleLength) {
title = title.substr(0, maxTitleLength) + ‘…’;
}

// 年月日設定
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = “0” + m;}
var d = dd.getDate();
if (d < 10) {d = “0” + d;}
var date = yearNum + “年” + m + “月” + d + “日”;
container.innerHTML += “<li><span>” + date +” </span>” +” <a href='” + entry.link + “‘ target=’_blank’>” + title + “</a></li>”;
}
}
});

}
google.setOnLoadCallback(initialize);

</script>

表示したいところに下記タグを挿入
<ul id=”feed1″></ul>

後はCSSで整えてください。

Firefoxブラウザで『お使いのPCのパフォーマンスが低下しています』という変な広告が・・・

突然、Firefoxブラウザで『お使いのPCのパフォーマンスが低下しています』という変な広告が出ました。

お使いのPCのパフォーマンスが低下しています

Google先生に聞きながら、変なアドオンやプログラムがインストールされていないか調べてみましたが該当無し。

ウィルスチェックもしましたが、問題なし。

Firefoxには『Adblock Plus』という広告を表示しないアドオンがあるらしく、Adblock Plusをインストール。

Adblock Plus

Firefoxでは全ての広告が表示されなくなりました。

広告が表示されなくなりました。

もしFirefoxで変な広告が出たときはお試し下さい。

 

EC-CUBEでSSL利用時に、相対バスから絶対パスに変える方法

EC-CUBEでSSLを利用すると、テンプレートの各リンクが相対パスになっているため、一度SSLURLに入るとURLがSSLのままになってしまいます。

それでは変なので、修正します。

青地の部分を

<a href="<--{$smarty.const.TOP_URL|escape}-->">
又は
<a href="<!--{$smarty.const.ROOT_URLPATH}-->">

赤字の部分に変更します。

<a href="<!--{$smarty.const.HTTP_URL}-->">

必要な箇所は全て修正しないといけないので、ちょっと大変かもしれません。

スマートフォンのホーム画面用ウェブクリップアイコンをホームページに設定する

スマートフォンやタブレット用のホーム画面用ウェブクリップアイコンをホームページに設定する方法でです。

アイコン画像はPNG形式で、タブレットにも対応するために144px x 144pxで作り、ファイル名は下記にします。

apple-touch-icon.png

アイコンをサイトルートにアップし、headerに以下のように記述します。

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">

これで出来ると思います。