【画面いっぱいに表示してもスクロールできるよ】スマートフォン、タブレットなどモバイル端末で埋め込んだGoogleMapをスクロールする方法が変わっていました たまたまAndroidのタブレット（ZenPad 8.0）でGoogleMapを埋め込んでいるページを見たのですが、地図を移動させたいな〜と思ってスクロールすると、オーバーレイで「地図を移動させるには指2本で操作します」と文字が表示されて、地図が動かないようになっていました。 ちなみにですが、MAP右上のアイコンをタップすると全画面表示されます。 スマートフォン（iPhone SE）で見ても同じような挙動になっていました。例として、以下の地図をモバイル端末（スマートフォンやタブレット）でご覧ください。 表示された文字のとおり、地図を動かしたい場合は指2本で動かせます。 これでモバイル端末で「画面いっぱいにGoogleMapを表示しても

Gulpを使って「特定のファイル内に書かれている文字列を置換（削除）」する機会がありました。 具体的にどういう時に使ったのかというと・・・AMP（Accelerated Mobile Pages Project）対応のページをオリジナルデザインにする際にインラインでCSSを適用することがあるのですが、文字エンコーディングの指定（「@charset “UTF-8”;」など）の記述があると以下のようなエラーが出ます。 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@charset'.Sassを使ってCSSをコンパイルすると、この文字エンコーディングの指定が自動で書かれてしまいます。(書かれない方法もあるかもしれないけど、調べましたがいいやり方が見つけられませんでした;;) というわけで、毎度コンパイルするたび

Web制作に関わっている方は「カルーセル」と言えば、以下のような「横にスクロールするもの」を想像する方も多いと思います。 ところで、カルーセルを実装する理由って何ですか？この「カルーセル」ってのは、1ページに表示するコンテンツ量が多いために、上下にスクロールさせる操作を閲覧者にあまりさせないための施策、つまり「上下のスクロール量を減らす」目的として採用することがあります。 また、1つの話題に対して関連する複数の選択肢を「カルーセル」として1つにまとめて、横に並べることで前後関係を把握しながら閲覧してもらえる、というメリットもあるんじゃないかと思います。 上記の内容を端的に表現すると「モバイルでの操作性や利便性を高めるために、カルーセルを実装することもあるよ」ということですね。 そんなカルーセルを、AMP対応ページにも実装したいよね！ 実装しましたさっそく実装しました。以下はキャプチャ画像で

例えばですが、WordPressのカテゴリーで「Web全般」ってカテゴリーを作ったとします。 その「Web全般」カテゴリーの編集画面には、下の画像のように名前/スラッグ/親子関係の設定のほかに「説明」を入れる箇所がありますね。 カテゴリーの編集画面 カテゴリーの他にも、タグ/カスタムタクソノミーのタームの編集画面にも「説明」の入力欄はあります。 ※「タクソノミー」とか「ターム」とか、あまり意味が分からない場合は「こういう画面には、説明の入力欄があるよね」ってことを認識できればOKです。 というわけで・・・ここからが本題で、下の画像のように「説明」の入力欄でショートコードを使いたいこともあると思います。 「説明」の入力欄でショートコードを使いたい 以下に方法を書きましたので、興味がある方はご参考ください。 使用しているテーマ内にある「functions.php」ファイルの最後尾などに、以下の

私個人的にですが、Webサイトを「AMP（Accelerated Mobile Pages Project）対応して欲しい」という依頼が増えてきました。 このブログでも使っているWordPressですと、AMP対応できる便利なプラグインがすでに開発されていて、プラグインを有効にするとすぐに対応できます。 プラグインを使って対応する方法もアリなんですが、プラグインを使わずに対応する必要も依頼によっては出てきていますので、今後のためにメモ書きとして対応したことを少しずつ書くことにしました（いずれ「AMPとは何なのか」「AMP対応することで何が嬉しいのか」など書いて行こうと考えています） というわけで、今回はAMP対応ページにYouTube動画を埋め込む方法について書きました。興味がある方はご参考ください。対応については、AMPのドキュメント「amp-youtube.md」を参考にしています。

FREETEL（フリーテル）のスマートフォン「SAMURAI MIYABI（雅）」は地元の富山でもアプリやネットなど使うと快適なのか。データ通信が満足にできるのか試しました ソニー・エリクソン・モバイルコミュニケーションズ（現：ソニーモバイルコミュニケーションズ）のスマートフォンSO-01Bを発売当初（2010/4/1発売）から5年ほど使い続けている僕としては、「もういいだろ。そろそろ機種変してもいいだろ」という思いはあります。 だけど、変えたい動機がないから機種変をしないんです・・・そう思っていたところで、先日東京で開催されたFREETELの新商品発表会（2015/12/8）に参加する機会がありました。 いろいろと新しい情報が発表されたんですが、その発表会でスマートフォン「SAMURAI MIYABI（雅）」をありがたくお貸しいただきました。 ところでこの「SAMURAI MIYABI（

すごく細かいことなんですが、WordPressの特定カスタムメニューに追加されているリンクの個数を取得したくなりました。 文章だけで表現することがあまりうまくないので、画像付きでどんなことがやりたいのかを以下に書きました。 やりたいこと例えば、WordPressの管理画面から「外観」→「メニュー」のページを開きます。 メニューのページでは、下の画像のようにメニュー構造に「3つ」のリンクが追加されていて、メニュー設定では「Global Nav」にチェックが入っているとします。 このメニュー構造にあるリンクの個数「3」を取得する方法です。 以下のコードで取得できます。 <?php $menu_object = wp_get_nav_menu_object( ’グローバルナビ’ ); //ナビゲーションの情報取得 echo $menu_object->count; //リンクの個数を表示コードが

WordPressプラグイン「Jetpack」を有効にした際に読み込まれるCSSやJavaScriptを無効化（削除）する方法 WordPressで作ったWebサイトの表示を高速化させるために「不要なCSSやJavaScriptを読み込まないように設定する」なんてことはよく聞きますね。 今回は、WordPressプラグイン「Jetpack」に焦点をあてて見てみました。 読み込まれるCSSとJavaScriptJetpackを有効にすると、下のようなCSSやJavaScriptがデフォルトで読み込まれます。 CSS<link rel='stylesheet' id='jetpack_css-css' href='https://www.imamura.biz/blog/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0' type='te

初めてSIMカードを買ったんですが、FREETEL SIMの「使った分だけ安心プラン」を選びました。 この「使った分だけ安心プラン」とは、おおまかに表現すると「アプリやネットなどでデータ通信を行った分だけ料金がかかる仕組み」です。 この仕組みを利用して、特定のデータ通信量を超えたらデータ通信制限（FREETEL SIMでは「節約モード」と言います）を行い、料金を一定額以上支払わないように設定することもできます。 今回はその「節約モード」の設定方法と、「今月はどれだけのデータ通信量を利用したのか」を確認する方法についてを主に書きました。 節約モードの設定方法が知りたい今現在、どれくらいのデータ通信量を利用しているのか知りたいデータ通信にかかる費用は最低限に抑えたい（一定額以上かからないようにしたい）などお考えの方はご参考ください。 節約モードの設定を行う方法まずは、FREETELの公式サイト

本題に入る前に少し前置きを・・・以前まで、外出の時にはモバイルルーターを持ち歩いていました。 音声通話のみのWi-Fi対応のスマートフォンWi-Fi対応のタブレット以上の2つの端末をセットで持ち歩くことがほとんどで、道に迷ったら地図のアプリを開いたり、電車乗り換えのアプリを開いたり、企業のWebサイトをチェックしたりできて便利だったんですが・・・ モバイルルーターの契約は約1年前に解除しました。解除した理由は、月額費用が高すぎる（4,000円弱/月）と思ったからでした。 やっぱり外でもアプリやネットは利用したい外出中にアプリやネットを利用したい時はどうしているかと言うと、お店などWi-Fiが整備されている環境が割とあるので、ありがたく利用しています。 ですが、最近は打ち合わせで外出する機会も多くなってきて、1日中外出という機会も増えてきました。1日数件、外出先をまわることもよくあります。

WordPressで作ったサイトで、ユーザーの行動（クリック・タップ・スクロール）が可視化できるヒートマップ付きアクセス解析「Ptengine」を導入してみよう ところで、WordPressで作ったサイトのアクセス解析はどのツールを使っていますか。有名なものではGoogleのサービスでGoogleAnalytics（グーグルアナリティクス）を利用している方も多いと思います。 私は、アクセス解析ツールはGoogleAnalyticsに加えて、サイトのあるページに対して、 どの部分に視線や行動（クリック・タップなど）が集中しているのかどの部分までスクロールするユーザーが多いのかなど「サイト管理者が知りたくてしょうがない情報」を、ヒートマップを利用して解析が行える「Ptengine」というアクセス解析ツールを使っています。 その前に「ヒートマップ」とは何かここで「ヒートマップ」の概要をおさらいし

WordPressの投稿データを使っていろいろやりたい事が今日もありました。たぶん、明日もあるんだろうと思います。 今回やりたかったことは、これです。パーマリンク設定で「%postname%」を利用している場合、この「%postname%」の設定や値によって条件分岐をしたくなりました。 パーマリンク設定で「%postname%」を利用（一例です） 「どうすれば条件分岐できるんだろ・・・」と思って調べたんですが、なんかできそうだな～と思って使ったのが「get_sample_permalink」でした。 今後も使うかもしれないので、「get_sample_permalink」を使うとどういった値が取得できるのかを調べました。 こんなことしたい方が私の他にいるのかどうかわかりませんが、機会がありましたらご参考ください。 投稿の編集画面で「get_sample_permalink」さっそくやろう。

WordPressプラグイン「Newpost Catch」バージョンアップしました。WordPress4.3対応済です WordPressプラグイン「Newpost Catch」のバージョンアップ作業が完了しました。今回のバージョンアップで行った対応は以下の通りです。 WordPress4.3の互換性チェックをしました本記事掲載時点でのWordPress最新バージョン4.3の動作検証を行い、問題なく動作することを確認しました。 コンストラクターメソッドの対応をしましたWordPress4.3からは、非推奨となっているコンストラクターメソッドがありまして、WordPressのデバッグモードをONにして確認すると以下のようなメッセージが表示されるようになりました。 呼び出された WP_Widget のコンストラクターメソッドはバージョン 4.3.0 から非推奨になっています! 代わりに __c

WordPressの投稿の編集画面に独自の入力欄を追加することってあります。例えば下のような感じです。 何でも書く用の入力欄を追加 ここに入力する内容は、html,CSS,画像などを使ってある程度装飾したい。 でも、htmlやCSSのことはよくわからないし、できれば文字以外の入力はもうちょっと感覚的にやりたい。 その場合は、この入力欄に対して普段WordPressの投稿の編集画面で使っているエディターを使えるようにしておくと便利です。 エディターを有効にする方法例えば、下のような記述を「functions.php」ファイル内に追記します。 <?php add_action( 'edit_form_after_editor', 'original_editor' ); function original_editor(){ $content = ''; //あらかじめ表示させておきたい内容

今日は、僕の住んでいる東京都北区十条の事をちょっと・・・埼京線十条駅の北口の改札（タクシー乗り場がある出口）を出ると、十条銀座商店街への入り口がすぐに見えてきます。 十条駅の北口の改札を背にして右奥に十条銀座の入り口があります その十条銀座商店街の中には、とても有名な「だるまや餅菓子店」という甘味喫茶があります。地元十条の方からは「だるまや」と略されて呼ばれることが多いです。 この「だるまや」では餅菓子をはじめとしておいしい甘味が揃っていますが、特に人気の商品が「かき氷」で、全国から食べに訪れるお客さんで連日いっぱいです。 下の写真はお店の外観ですが、この日もお客さんで賑わっていました。 店内が混雑していてなかなか入れないこともあるので、お店の外に並ぶ用の椅子が数脚置かれています。 僕はこの日はさすがに「暑すぎるわ・・・もう我慢ができんわ～」と感じていましたが、ちょうどお店の前を通りかかっ

WordPressをインストールしているデータベース内に独自のテーブル作って、WordPressの管理画面内にある投稿の編集画面からそのテーブルに対してデータを追加・編集・削除をさせたい、という事は僕はよくあります。 その場合「データベース内にテーブルがあるかどうか」をまずは判別して、条件分岐させて処理を変えたいなと思いました。 以下にその方法を書きましたので、似たようなことをされたい方はご参考ください。 その前に、知っておくと役に立つデータベース名の定義WordPressをインストールしたときに作られる「wp-config.php」ファイル内に、以下の記述があります。 /** WordPress のためのデータベース名 */ define('DB_NAME', 'mydb');上の記述では「mydb」というデータベース名が定義されています。これを利用しましょう。 WordPressのイン

WordPressのエクスポート機能って便利ですね。以下の方法でエクスポートファイルをダウンロードできます。 WordPressのエクスポートファイルをダウンロードする方法WordPressの管理画面から「ツール」→「エクスポート」を選びます。 エクスポート画面に移動するので、エクスポートしたい内容を選んで「エクスポートファイルをダウンロード」ボタンを押します。 すると、XML形式で書かれたエクスポートファイルのダウンロードが始まります。 以上が前置きで、以下が本題です。 エクスポートファイルを元に、細かく投稿を振り分けることになったダウンロードしたエクスポートファイルを元にして、新しいサイトに投稿をインポートすることがありました。 インポートする際、そのままインポートするのではなく、ルールを設けて、投稿ごとに細かく振り分けをする必要がありました。 例えば、以下のようなルールです。 投稿A

WordPressで個別投稿ページ・固定ページ・カテゴリーページなど様々なページを表示する場合は、テーマフォルダの中にある特定のテンプレートファイルを読み込んで表示していますね。 下の表は、表示するページに対して読み込まれるテンプレートファイル名の「一例」です。 表示するページ読み込まれるテンプレートファイル名 「一例」という表現にしているのは、「表示するページによって読み込むテンプレートファイルを変える」ことができるからです。 「表示するページによって読み込むテンプレートファイルを変える」とはある製品情報ページがあったとして、スラッグが「product」だとします。この場合は「page-product.php」ファイルがテーマフォルダ内にあれば、「page.php」よりも優先的に読み込まれる、という具合です。 このような仕組みはある程度ルール化されていますので、詳しく知りたい場合は「テン

WordPressの「wp_list_categories」で特定のカテゴリーの投稿数が1,000件以上など、カンマ付きの投稿数をa要素内に含めるにはこうやる WordPressのカテゴリーの一覧を出力するのに便利な「wp_list_categories」ですが、出力する際にちょっとカスタマイズしたいことがあります。 例えば、カッコ「（）」付きの投稿数をa要素内に含めたい場合。 カッコ「（）」付きの投稿数を・・・ a要素内に含めたい そんな時は、以下のように今まで書いていました。 //すぐに出力せずに一旦$categoriesに格納 $categories = wp_list_categories('echo=0&show_count=1'); //カッコ「（）」付きの投稿数が見つかった場合はクラス名を付与して「a要素内」に含める $categories = preg_replace('/

WordPressのカテゴリーやタグ、カスタムタクソノミーにそれぞれ独自の入力欄を追加する方法を調べていたんですが、webopixelさんの記事「WordPressのカテゴリーにカスタムフィールドを追加する」がわかりやすくて、とても参考になりました。 そこで、掲載されているコードを参考にさせて頂いて自分なりにカスタマイズして扱いやすくしました。 もし似たようなことをされたい方は、ご参考ください。 カテゴリー、タグ、カスタムタクソノミーに独自の入力欄追加ご使用中のテーマフォルダ内にある「functions.php」ファイルの最後尾などに以下のコードを追記します。 <?php //入力欄を追加 add_action('category_edit_form_fields','add_taxonomy_fields'); //カテゴリー add_action('post_tag_edit_form