MapPress Easy Google Maps が表示されないときの対処法

WordPressでお世話になるプラグイン、トップ5に間違いなく入るであろう、MapPress Easy Google Maps ですが、いざマップを挿入してみると、地図の枠が真っ白で、なにも表示されない、ということがあります。

MappPressの地図が表示されない

こんな感じ。

で、GoogleマップそのものはJavaScriptで呼び出してるので、きっとその読み込みあたりで問題なんだろうな。とMappPressの設定を見てみると、「Script」という項目があって、「Output scripts in footer」にチェックが入っていたので、そのチェックを外してみたところ。。。

Output scripts in footer

ばっちり表示されます。
MappPress 表示されるようになる。

Output scripts in footer にチェックが入っていると、foot部分にMapPressのスクリプトを呼び出すコードが入るようになっていたのですが、チェックを外すことで、head部分にコードが入るようになるというわけです。
すると、スクリプトを呼び出す順番が、マップ部分よりも先になるとか、ほかのスクリプトより先になるとかで、挙動がかわると。

MapPressがうまく表示されないようなら、まずお試しを。

で、これでだめなら、いったん他のテーマ(WordPressにデフォルトで入っているテーマ)や、MappPress以外のプラグインを一つずつ停止させて、マップが表示されるかどうか試していけば、原因となっているプラグインがわかるので、別のプラグインに入れ替えるとかすることになります。

 

C# 二値化した画像をGraphicsで扱えるようにする

C# 二値化した画像をGraphicsで扱えるようにする」で二値化した画像に、赤枠をつけたりしたいと思って、Graphicsで処理しようとすると、「グラフィック オブジェクトをインデックス付きピクセル形式を持つイメージから作成できません」と怒られます。

        void test()
        {

            //元の画像を読込
            OpenCvSharp.IplImage img = new OpenCvSharp.IplImage("test.jpg");

            //二値化画像を保存するIplImageの準備
            OpenCvSharp.IplImage bin_iplImg = new OpenCvSharp.IplImage(img.Width, img.Height, BitDepth.U8, 1);

            //閾値
            int threshould = 180;

            //グレースケールに変換
            img.CvtColor(bin_iplImg, OpenCvSharp.ColorConversion.BgrToGray);
            //二値化処理
            OpenCvSharp.Cv.Threshold(bin_iplImg, bin_iplImg, threshould, 255, OpenCvSharp.ThresholdType.Binary);

            //Bitmapを取得
            Bitmap bmp = OpenCvSharp.Extensions.BitmapConverter.ToBitmap(img);

            //ここで、「グラフィック オブジェクトをインデックス付きピクセル形式を持つイメージから作成できません」と怒られる
            Graphics g = Graphics.FromImage(bmp);

            //赤線で囲む
            Pen pen = new Pen(Color.FromArgb(150, Color.Red), 10);
            g.DrawRectangle(pen, 0, 0, bmp.Width, bmp.Height);

            g.Dispose();
            pen.Dispose();
            pictureBox_scanData.Image = bmp;
        }

どうやら、二値化した画像は、Format1bppIndexedなのでダメということのようで。
https://msdn.microsoft.com/ja-jp/library/system.drawing.graphics.fromimage(v=vs.110).aspx

じゃ、どうするか考えたのですが、GetThumbnailImageを使えば、さくっと解決できます。

        void test()
        {
            //元の画像を読込
            OpenCvSharp.IplImage img = new OpenCvSharp.IplImage("test.jpg");

            //二値化画像を保存するIplImageの準備
            OpenCvSharp.IplImage bin_iplImg = new OpenCvSharp.IplImage(img.Width, img.Height, BitDepth.U8, 1);

            //閾値
            int threshould = 180;

            //グレースケールに変換
            img.CvtColor(bin_iplImg, OpenCvSharp.ColorConversion.BgrToGray);
            //二値化処理
            OpenCvSharp.Cv.Threshold(bin_iplImg, bin_iplImg, threshould, 255, OpenCvSharp.ThresholdType.Binary);

            //Bitmapを取得
            Bitmap bmp = OpenCvSharp.Extensions.BitmapConverter.ToBitmap(img);

            //GetThumbnailImageを利用して変換
            Image image = bmp.GetThumbnailImage(bmp.Width, bmp.Height, new Image.GetThumbnailImageAbort(dummy), IntPtr.Zero);

            //GetThumbnailImageをつかって変換しておけば大丈夫
            Graphics g = Graphics.FromImage(image);

            //赤線で囲む
            Pen pen = new Pen(Color.FromArgb(150, Color.Red), 10);
            g.DrawRectangle(pen, 0, 0, bmp.Width, bmp.Height);

            g.Dispose();
            pen.Dispose();
            pictureBox_scanData.Image = bmp;
        }

 

OpenCvSharp でRGB要素別々で二値化する

OpenCvSharpで、画像を二値化する方法はグレースケールしてから、Cv.Thresholdで二値化します。

        //using OpenCvSharp;
        private IplImage getBinImage()
        {
            //元の画像を読込
            IplImage img = new IplImage("test.jpg");

            //二値化画像を保存するIplImageの準備
            IplImage bin_iplImg = new IplImage(img.Width, img.Height, BitDepth.U8, 1);

            //閾値
            int threshould = 180;

            //グレースケールに変換
            img.CvtColor(bin_iplImg, ColorConversion.BgrToGray);
            //二値化処理
            Cv.Threshold(bin_iplImg, bin_iplImg, threshould, 255, ThresholdType.Binary);
            return bin_iplImg;
        }

 

でも、RGB各要素で閾値を変えたい場合、たとえば、緑成分の多い画像を処理したい時などには次のようにします。

        
        //using OpenCvSharp;
        IplImage getBinImage2()
        {
            //元の画像を読込
            IplImage img = new IplImage("test.jpg");

            //二値化画像を保存するIplImageの準備
            IplImage bin_iplImg = Cv.CreateImage(img.Size, BitDepth.U8, 1);

            //RGB要素のIplImageの準備
            IplImage r_iplImg = Cv.CreateImage(img.Size, BitDepth.U8, 1);
            IplImage g_iplImg = Cv.CreateImage(img.Size, BitDepth.U8, 1);
            IplImage b_iplImg = Cv.CreateImage(img.Size, BitDepth.U8, 1);

            //元画像をRGBに分解
            Cv.Split(img, b_iplImg, g_iplImg, r_iplImg, null);

            //RGB各要素の閾値
            int r_threshold = 180;
            int g_threshold = 230;
            int b_threshold = 150;

            // 各RGB要素で閾値以下のピクセルを抽出する
            Cv.Threshold(r_iplImg, r_iplImg, r_threshold, 255, ThresholdType.BinaryInv); 
            Cv.Threshold(g_iplImg, g_iplImg, g_threshold, 255, ThresholdType.BinaryInv); 
            Cv.Threshold(b_iplImg, b_iplImg, b_threshold, 255, ThresholdType.BinaryInv); 

            // ORでRGB要素を合算
            Cv.Or(b_iplImg, g_iplImg, bin_iplImg, null);
            Cv.Or(bin_iplImg, r_iplImg, bin_iplImg, null);

            return bin_iplImg;
        }

Analytics で直帰率が0%

Analyticsで、なぜかこのブログの直帰率が脅威の0%という、とんでもな数値になっていていました。
まぁ、メモ+実験ブログなので、直帰率なんて気にしてないのですが、なんでだろうと。

直帰率0%

で、調べてみてわかったのですが、結論から言うと、Analyticsのコードが2つはいっていたからでした。
Analyticsコードの重複

というのも、Analyticsを設定した時に、header.phpに直接コードを書き込んだのですが、それとは別に、
Google Analytics Dashboard for WP というプラグインをあとから入れていました。

このプラグインを使うと、WordPressのダッシュボードに簡単なアクセス解析結果を表示してくれるので、重宝するのですが、Google Analytics Dashboard for WP を導入すると自動的にアナリティクスのコードを入れてくれるようでして、それに気が付かずに使っていたということでした。

というわけで、header.phpから、Analyticsのコードを消すと、直帰率が表示されるようになりました。

1604260003

なかなかの高レイト。
まぁ、そうなるよね。

 

 

 

WordPress is_front_page() と is_home() の違い

is_front_page() と is_home() の違いがややこしい。

is_front_page() と is_home() は、設定→表示設定→フロントページの表示 の設定によって、挙動が変わります。
表示設定 フロントページの表示

設定→表示設定→フロントページの表示 で、● 最新の投稿 を設定しているときは、is_front_page() もis_home()も結果は全く同じで、違いはありません。

ところが、●固定ページ (以下を選択) を選択した時に違いが出てきます。
ざっとまとめると以下のようなこんな感じ。

is_home()

最新の投稿 を選択している場合、
is_home() は、トップページ(URL直下)のときに、真(適用される)になります。(is_front_page()と同じ)

●固定ページ (以下を選択) を選択している場合、
is_home() は、「投稿ページ:」 に設定されたページが表示されている時に真(適用される)になります。

is_front_page()

最新の投稿 を選択している場合、
is_front_page() は、トップページ(URL直下)のときに、真(適用される)になります。(is_home()と同じ)

●固定ページ (以下を選択) を選択している場合、
is_front_page() は、「フロントページ:」 に設定したページの時に真(適用される)になります。

is_front_page() と is_home() って同義語っぽいので、おなじじゃないの?とか思って使うと、痛い目にあいます^^;

くわしくは、
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_home#Blog_Posts_Index_vs._Site_Front_Page
とか、
https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0#The_Blog_Page

WordPressで条件によって見せ方を変える(条件分岐)

サイト内のページによって見え方を変えたい場合、CSSだけで対応できる場合

CSSで対応する方法

殆どのテーマでは、body_class()関数がbobyタグのところに仕込まれてます。

<body <?php body_class(); ?> >

このおかげで、ページを識別できるようになっています。
たとえば、ログイン中に表示された投稿ページの場合、こんな感じにclassがついてきます。

<body class="singular single single-post postid-1049 single-format-standard logged-in admin-bar  customize-support" > 

そこで、投稿ページ(single-post)のときだけ、P要素の文字サイズを変えたいときは、

.single-post p{
	font-size:110%;
}

とすればOKです。

また、IDを直接指定すれば、任意のページだけを変えることもできます。

.postid-1049 p{
	font-size:110%;
}

ちなみに、singular は、固定ページか投稿の個別ページの時につきます。

くわしくはこちら
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class

テンプレートで分ける方法

テンプレートファイルを作成して、任意のページに対してデザインを変えることができます。

たとえば、固定ページのテンプレートを作成するには、今使っているテーマのpage.phpをコピーして、page-test.phpなどのように、独自のファイル名をつけて保存します。

そして、そのファイルの先頭に、以下を追加します。

<?php
/*
 Template Name: テスト用
*/
?>

これで、このファイルはテンプレートファイルとして機能します。
ためしに、固定ページを作成すると、テンプレートで「テスト用」が選べるようになっていますので、任意の固定ページでデザインをかることができるわけです。
固定ページ テンプレートの選択

ちなみに、page-test.phptというファイル名をつけた場合、slugがtestという固定ページの場合、自動的にこのテンプレートファイルが適用されることになります。
また、page-561.phpのようにIDを使ってファイル名をつけることで、IDで決め打ちすることもできます。

投稿の個別ページの場合は、slugや、IDでは使い分けできません。ブログですからね。
ただし、single-test.php とすると、カスタム投稿名がtestのカスタム投稿の時に有効になりますので、カスタム投稿別にテンプレートを変えることができます。

他にも、category-123.php とすれば、カテゴリーIDが123のカテゴリーページで使われるテンプレートになりますし、tag-test.phpとすれば、slugがtestのtagページのテンプレートとして有効になります。

くわしくは、こちら
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

条件分岐で分ける方法

テンプレート内のコードで分岐する方法です。
たとえば、

if (is_page('test'){
    echo '<h2>' . get_the_title() . '</h2>';
}else{
    echo '<h3>' . get_the_title() . '</h3>';
}

とすれば、slugがtestの固定ページのときだけ、タイトルのタグをH2にする、といったことができます。

また、固定ページのテンプレートに連動して、例えばheader.phpの内容を変えたい場合は、

if (is_page_template( 'page-test.php' ){
    echo '<h1>' . wp_title('') . '</h1>';
}else{
    echo '<h2>' . wp_title('') . '</h2>';
}

のようにすれば、テンプレートファイル別で切り替えることができます。

他にも、

is_page('test') とすれば、slugがtestの固定ページのとき、
is_page('123') とすれば、IDが123の固定ページのとき、
is_page(array(123,133,143)) とすれば、IDが123か、133か、143の固定ページのとき、

同様に、
is_single('123') 
のようにすれば、投稿の個別ページでの分岐に使えます。

分岐でよく使うけど、ややこしいのが、is_single() と is_singular() のちがい。

is_single() は投稿の個別ページのときに真になりますが、
is_singular() は、固定ページや、投稿の個別ページの時に真になります。

くわしくはこちら
https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

SNSシェアボタンのコードを取得する

SNSのシェアボタンを取得するページのURL Facebook https://developers.facebook.com/docs/plugins/like-button Twitter https://about.twitter.com/ja/resources/buttons#tweet Google+ https://developers.google.com/+/web/+1button/#documentation LINE https://media.line.me/howto/ja/ はてなブックマーク http://b.hatena.ne.jp/guide/bbutton

get_stylesheet_directory_uri と、get_template_directory_uri の違い

get_stylesheet_directory_uri も、get_template_directory_uri も、WordPressのテーマのあるURLを返す関数で、テーマをカスタマイズする際にはちょくちょくお世話になります。

get_stylesheet_directory_uri と、get_template_directory_uri の違い

で、この2つ。どう違うかというと、

get_stylesheet_directory_uri が子テーマのURL
get_template_directory_uri が親テーマのURLを
それぞれ返します。

たとえば、子テーマから元テーマにあるファイルを呼び出したい時には

<?php require(get_template_directory_uri() . '/sns_buttons.php'); ?>

子テーマの中で用意したファイルを呼び出したい時には、

<?php require(get_stylesheet_directory_uri() . '/sns_buttons.php'); ?>

といった感じ。

もし、子テーマではなく、親テーマでget_stylesheet_directory_uri を使った場合ですが、get_template_directory_uri と同じ親テーマのURIを返すので、親テーマでは使い分けを気にする必要はありませんね。

ちなみに、get_template_directory、get_stylesheet_directory、のように、_uriを外せば、URIではなくPATHを取得できるので、

<?php require(get_template_directory() . '/sns_buttons.php'); ?>

子テーマの中で用意したファイルを呼び出したい時には、

<?php require(get_stylesheet_directory() . '/sns_buttons.php'); ?>

としたほうが、DNS経由しない分高速になるかもしれない。

さらに、get_template_directory、get_stylesheet_directory、はそれぞれ、TEMPLATEPATH、STYLESHEETPATH という定数が用意されているので、

<?php require(TEMPLATEPATH . '/sns_buttons.php'); ?>
<?php require(STYLESHEETPATH . '/sns_buttons.php'); ?>

でもOK。

get_template_part を子テーマで使ったらどうなる?

ここで、require関数ではなく、get_template_part を子テーマで使ったらどうなるかが気になったので、調べてみました。

WordPressの関数リファレンスでは、

テンプレートパーツ (ヘッダー、サイドバー、フッター以外) をテンプレートに読み込みます。これにより、テーマがコードのセクションを再利用すること、また子テーマが親テーマのセクションを置き換えることが容易になります。

となってますが、置き換えることがどう容易になるかピンときません。

で、get_template_part のソースコードを直接覗いてみると、get_template_part関数内で、locate_template関数を呼び出していて、 locate_template関数の中で、こんなふうになってました。

if ( file_exists(STYLESHEETPATH . '/' . $template_name)) {
        $located = STYLESHEETPATH . '/' . $template_name;
        break;
} elseif ( file_exists(TEMPLATEPATH . '/' . $template_name) ) {
        $located = TEMPLATEPATH . '/' . $template_name;
        break;
}

STYLESHEETPATH と、TEMPLATEPATH は、それぞれ、get_stylesheet_directory と、get_template_directory と等価なので、
まず、子テーマフォルダに、指定されたテンプレートファイルがあるかどうか確かめて、
なければ親テーマフォルダを探す。

というふうになってます。
なので、親テーマで用意されたテンプレートを、子テーマ側で上書きできるよ。ということですね。

まとめ

親テーマ 子テーマ
テーマフォルダのURIを返す get_template_directory_uri get_stylesheet_directory_uri
テーマフォルダのPATHを返す get_template_directory
TEMPLATEPATH
get_stylesheet_directory
STYLESHEETPATH
get_template_part 親テーマフォルダにあるファイルを読み込む 子テーマフォルダにあればそれを、なければ親テーマフォルダにあるファイルを読み込む

 

 

 

 

[JQuery] input要素のdateタイプの値を計算する

たとえば、こんなふうに2つのdateタイプのinput要素があって、その期間を計算する方法です。

JQueryのスクリプトはこんな感じ。
setDate関数を作って、その中で計算しています。


日付のフォーマットは、こちらが参考になりました。
http://stackoverflow.com/questions/3066586/get-string-in-yyyymmdd-format-from-js-date-object

この部分です。

	var year = fromDate.getFullYear().toString();
	var mm = (fromDate.getMonth() + 1).toString();
	var dd = fromDate.getDate().toString();
	var yyyymmdd = year + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
	$('#date-end').val(yyyymmdd);

dateタイプのvalueを設定するには、2016-04-04のようなフォーマットでなければいけないようで、そのためのフォーマティングをここでやってます。
jQuery UI を使えば、もっとシンプルにできるようですが、ここでは使わない前提で。

日付の計算は簡単で、getTimeで取得した数値を引き算してるだけです。

	var days = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);

getTimeで取得できるのは、1970/01/01 00:00:00から経過したミリ秒なので、60*60*24*1000 = 86400000 で割って、小数点以下は、Math.floorで切り捨て。

C# Tesseract-OCRで「liblept168.dllが見つからない」エラー

Windowsで文字の読取りをしようと、Tesseract-OCRを利用させていただきました。 NuGet Tesseract-OCR で、開発環境ではうまく行ったので、ビルドして配布先のPCで実行したところ、こんなエラーが。

Failed to find library "liblept168.dll" for platform x64.

インストーラーに、liblept168.dll が含まれてなかったか?と思ったけれど、それでもなく、 ビルドに問題があるのか?と、AnyCPUやら、x64 やら、x86 やらでビルドしてみるも結果はおなじ。

なんだ~、なんだ~、ビルドの仕方がまずかったか?とか、開発環境とインストール先のPCを見比べてみたりとか、 あたふたして結局 C++ Runtime がインストールされてないこいとが原因と判明。
Tesseract-OCRの基礎実験から日がたっていて、すっかり忘れてました。

tesseractのドキュメントにも、デカデカと書いてあるのにね。
https://github.com/charlesw/tesseract

おまけ

再頒布パッケージのダウンロード先

Microsoft Visual C++ 2010 ランタイム 再頒布可能パッケージ(x86)
https://www.microsoft.com/ja-jp/download/details.aspx?id=5555

Microsoft Visual C++ 2010 ランタイム 再頒布可能パッケージ(x64)
https://www.microsoft.com/ja-jp/download/details.aspx?id=14632

Microsoft Visual C++ 2010 SP1 ランタイム 再頒布可能パッケージ(x86)
https://www.microsoft.com/ja-jp/download/details.aspx?id=13523

Microsoft Visual C++ 2010 SP1 ランタイム 再頒布可能パッケージ(x64)
https://www.microsoft.com/ja-jp/download/details.aspx?id=14632

Microsoft Visual C++ 2012 ランタイム 再頒布可能パッケージ(x86,x64,arm)
https://www.microsoft.com/ja-jp/download/details.aspx?id=30679

Microsoft Visual C++ 2013 ランタイム 再頒布可能パッケージ(x86,x64,arm)
https://www.microsoft.com/ja-jp/download/details.aspx?id=40784

Microsoft Visual C++ 2015 ランタイム 再頒布可能パッケージ(x86,x64)
https://www.microsoft.com/ja-jp/download/details.aspx?id=48145

Microsoft Visual C++ 2015 Update1 ランタイム 再頒布可能パッケージ(x86,x64) https://www.microsoft.com/ja-jp/download/details.aspx?id=49984

Microsoft Visual C++ 2015 Update2 ランタイム 再頒布可能パッケージ(x86,x64) https://www.microsoft.com/ja-jp/download/details.aspx?id=51682