WordPressのcss,jssをGooglebotに返す

http://blog.makotokw.com/ の CSS ファイルおよび JS ファイルに Googlebot がアクセスできません

というメールが来ていた。

バグか何かだろうと思っていたが、世間でも似たようなメールを受けている人がいるのでどうやら正しそう。調べてみると /wp-includerobots.txt で拒否していたので /wp-include にある jquery.js などにアクセスできていない模様。

robots.txt を以下のように修正した。

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Allow: /wp-includes/js/
Allow: /wp-includes/css/

検索エンジンも賢くなって本格的にjavascriptやcssもインデックス作成の情報として使うようだ。

BrowerSync動かない問題

WordPressのテーマの開発で、gulpからBrowerSyncを使っていたんだけどある時からBrowerSync経由で表示ができなくなった。更新が反映されないとかじゃなくてBrowerSyncのアドレスをブラウザで表示しようとするとタイムアウトになってしまう。

GitHubにIssue( Proxy not working with PHP’s built-in server )が上がっていてどうもPHPのビルドインサーバを起動する際のアドレスに localhost を指定するとダメらしい。0.0.0.0にしたら動くようになった。

自分のブログのテーマを開発するときはMac側でPHPのビルトインサーバを立ち上げて、さらにgulpやBrowerSyncを実行して、ブログのデータベースだけはVagrantでLinux立ち上げてその中でMySQL動かしている。

VPSで運用している本番のブログサーバのDBを同期するバッチを作っているので簡単に最新の投稿でテーマを確認できる。

世間にはVCCWのようなWordPress環境を簡単に作成するためのVagrantファイルなども公開されているけど、自分がVagrantで構築している仮想環境はVPS上のサーバを構築するChefの動作確認も兼ねているので自分専用のものを使っている。

WordPressブログテーマを更新

よりシンプルな自作のWordPressブログテーマに変更してみた。

旧テーマ(makotokw2014)。

新テーマ(makotokw2015)。

比べるとあんまり変わっていない気が。

使わない勇気

デザイナーでもないので、デザインとして必要なものが取捨選択できず、技術的に使えるものがあるとついつい使ってしまう。たとえばCSS3の角丸とか影(box-shadow, text-shadow)とか、FlatColorとか、Font Awesomeとか、WebFontとか。

今回WebFontをやめて、配色やIconも必要最小限にとどめた。その代わりにロゴはsvgにしたけど。これからはsvgの時代なのでここは必要と思って使った。

SVG

旧テーマではロゴだけWebFontを当てていたんだけど、今回はSVGに変えてみた。Modernizrを使って対応していないブラウザはpngに変えてみたり、cssで色を変えるにはimg要素ではなくインライン要素に変えないといけないようなのでゴニョゴニョした。

レガシーIE対応

このブログのアクセスだとIEのアクセスは15%でその内IE8が20%。IE7,IE6は微々たる数字なので無視、IE8も全体の3%なので無視してもいいけど崩れない程度に調整はしてもいいかなと思い、昔テレビPC作ったときか何かのVistaのライセンスが余っていたので、仮想環境に入れて確認した。

VistaはプリインストールしてあるのがIE7でmicrosoft.comにアクセスするとIE9に上げろと言われる。どうやらXPがIE8までらしい。IE8でアクセスしてくる人はまだXPの人なのかもしれない。XPを入れなおすのが面倒だったのでVistaでIE8を直接ダウンロードしてインストールした。

とは言え結局、レガシーIE対応は何もしなかった。ヘッダの横の配列が縦になったり、意図通りになっていない部分があったが、文章を読むのに違和感は無かった。サイドバーがなく、必要最低限のヘッダなのでcssが適応されていなくても文書を読むには支障がない。わざわさIEコメントやIE用のcssを増やしたくなかったので何もしないことにした。

シンプルなテーマはレガシーIE対応にも役立つ。

IE8でGenericiconsがうまく表示されない箇所があるのは諦めた。来年にはIEのセキュリティポリシーが変わってみんな最新版IEに上げざるをえなくなるはず。XPを使っている人ははやくOSをアップデートして欲しい。

中身もシンプルに

中身もシンプルにしようとパーツの共通化をした。WordPressでは投稿タイプを見てテンプレートを分けられるんだけどその利用を止めて、投稿も固定ページも、singleもarchiveも全て一つのcontent.phpにまとめて中で投稿タイプやis_single()などで分岐するようにした。

投稿タイプによってデザインを大きく変える場合はテンプレートを分けるのはありだけど、今回のテーマでは差分は小さいので複数のテンプレートを修正するのが面倒になって一つにまとめた。

あとは自分専用のテーマなのでカスタマイズ用のJavascriptのコードとかunderscoresが生成してくれたものは一回リセットすることにした。

残件

画像の使い方などまだテーマとしては変えたい部分はあるけれど、完璧を追い求めるときりがないので一旦置き換えてみた。もうちょっとMedium風にしたい。あとはコードハイライトのライブラリが複数あるなどコンテンツの修正を伴う整理が必要なのでそのあたりも随時直していきたい。

WordPress 4.0

WordPress 4.0がリリースされてた。一応メジャーバージョンアップなので週末にアップデートしてみた。今のところ何が変わったのかイマイチわかっていないし、体感できていない。ブログを見てみたところどうやらバージョン番号には特に意味がないらしい。

http://ja.wordpress.org/2014/09/05/benny/
4.0という数字は私たちにとっては単に3.9の後、4.1の前の数字にすぎませんが、少し余分な磨きを入れたよ うな感じもしています。このリリースでは、みなさんに楽しんでもらえる滑らかな執筆体験と管理体験をお届けします。

バージョンを 3.10 にするというのはなかったのかな。4.0に入れようとしたものが流れてしまったのだろうか。

そして4.0にアップしたら管理ページでリダイレクトループに入ってしまった。もともとの設定ではFORCE_SSL_LOGINでログインだけSSLにしていて、オレオレ証明書を入れていたためwp-login.php以外のアクセスはhttpにリダイレクトしていた。4.0で何か変わったのかわからないが、とりあえずhttps->httpのリダイレクトを解除した。

Googleさんがhttpsサイトを評価するとか言っているのでhttpsもちゃんと対応したいけど個人でサーバ証明書を買うのが面倒。本気でhttpsを推進するのであればGoogleさんがサーバ証明書を管理するサービスもやってくれるんじゃないかと淡い期待をしているんだけど、どうだろう。

検証環境つくってAmazonJS 0.7.2をリリース

AmazonJS 0.7.1でPHP5.4以上でショートタグの設定にかぎらず常に使えるようになった<?=をうっかり使ってしまった問題を修正したものをリリース。

<?=<?php echoに置換すれば済む問題だったけど、テスト環境がないことが問題だと思って、Dockerの勉強に数時間、Dockerの構築に数時間、方針変更してVagrant環境の構築に数時間、修正は10分みたいなすごい遠回りした。でも環境作ったので次からはこういう問題を事前に気付けるはず。作ったVagrant環境はあとでGitHubにあげる。

Vagrant

WordPressのDockerのイメージやVagrant環境はいろんな人が公開しているんだけど、今回使いたかったのは古いPHPのバージョンと古いWordPressの環境だったのでそれを探すのが難しくて結局自分でVagrant環境を作ってしまった。時間がなかったのでDebian 6 + PHP5.3でとりあえずチェックしたけど、WordPress 3.2からPHP5.2.4が最低環境になったのでPHP5.2の環境にしたいとは思ってる。

最初はDockerでいろんなPHPバージョン x WordPressのバージョンの環境をつくろうと考えていたけど自分の最新のWordPress以外では最低バージョンのWordPressとPHPの環境だけあれば大体okなのではと気づいてVagrantに方針変更した。

WP-CLI

VagrantでのプロビジョニングはChef Soloを使って、WordPressのインストールはWP-CLIを使った。PHP5.3.2以上が必要で、WordPress3.5.2以上じゃないと使えないコマンドがあったりするので、PHP5.2.4 + WordPress3.2を用意したいシナリオでは若干工夫が必要ではあるけど。

wp core download --locale=ja --version=3.1みたいにしてインストールできるので特定バージョンでテストしたい時すごく楽。データベースのexportやimportも出来るみたいなので手動でテストするならDockerよりもWP-CLIを駆使する方が便利だと思う。

WordPress 3.1で動かない

いざ環境できてやってみたらWordPress 3.1でAmazonJSが動かないという。wp_footerでスクリプトが出力されていない。3.2でもダメで3.3でようやく動いた。

http://wpdocs.sourceforge.jp/Version_3.3
Support for using wp_enqueue_script() and wp_enqueue_style() in the HTML body; all scripts and styles are added in the footer

AmazonJS 0.4.1くらいでスクリプトをフッタに移動し始めたんだけど、どうやらそれはWordPress 3.3以上じゃないと動かなかった模様。プラグインのWordPress必要最低バージョンを決めるときは使っているAPIのバージョンだけ気にしていたんだけどこういうこともあるということはやっぱりテストは必要。

WordPress 3.3も3年前のバージョンなので頑張って3.1に対応する必要ないかと思って必要最低バージョンを3.3に引き上げた。WordPress 3.2以下でAmazonJSを使いたい人はAmazonJS 0.4くらいだと動くかもしれません。

AmazonJS 0.7.1でやらかしてDockerを勉強

AmazonJS 0.7.1で問題が起きている模様。<?= $label ?>がそのまま表示される。やっちまったわ。

  • PHP5.3では<?が非推奨でデフォルトオフ←知ってた
  • でも<?php打つのめんどい
  • PHP5.4では<?のオンオフ関係なく<?=が使えるようになった←知ってた
  • 自分のWordPressテーマは自分しか使わないのでPHP5.5で<?=ガシガシ書いてた
  • WordPressの作業はまとめてやることが多いのでそのノリでAmazonJSも修正した←やらかした

というわけでPHP5.3以下でini.short-open-tagをオフにしている環境だと<?=が展開されない。

問題はPHP5.5でしか確認してないということだと思うし、いろんなバージョンで検証するならDocker使う場面キタコレとか思ってDockerについて調べて時間かかっている。WordPressプラグインのテストでなんか便利な方法ないのかな、PHPのバージョンだけじゃなく、WordPressのバージョンごとのテストも簡単にできるならしたい。

Dockerの勉強と構築に時間かかってるのでとりあえずphpbrewで5.3環境作ってテストした方が良さげ。もう少しお待ちを。

SNS共有ボタンのデザインを変えてみた

JetPackの共有ボタンのデザインが統一された(Jetpack 3.0 リリース!SNS 共有ボタンのデザインを変えてみました。)のが羨ましくなってこのブログのテーマでもやってみることにした。

ブランドアイコン対応

ただのリンクボタンにするだけなので技術的には難しくないのだが、ブランドアイコンの表示は少し苦労する。このテーマではTwitter, Facebook, Google+, はてなブックマーク, Pocketの共有ボタンを出しているんだけどこれらを全部サポートしているフォントアイコンがあるのかよくわからなかった。海外のフォントは大抵はてなブックマークを対応してない、Pocketの対応もまばらな感じ。

そんな中EntypoSocialIconがはてなブックマークに対応してくれていた。しかしPocketに対応していないので、はてなブックマークだけEntypoSocialIconを使って、それ以外をWordPressのテーマでも利用されているGenericonsで補うことにした。他の箇所ではFont Awesomeを使ってるんで共有ボタンのためだけにアイコンつかうの微妙っすわ・・・

前にWebフォントの作り方みたいな記事かサイトを見た記憶があるので必要に迫られたら自分用フォントアイコン作るかもしれない。

共有数を出せない

今までは各SNSの公式なボタンを使っていた。それらはiframeなどでゴニョゴニョしてカウントを出してくたりした。自前のデザインにするとその共有数のカウントを出すのが難しくなる。

具体的にはPocketとGoogle+が難しい。Pocketはそもそもカウントを取得するAPIが見当たらなかった。Google+はAPIはあるのだがPOSTパラメータが必要なのでCross-Originの制限に合う。結局Jsonpでカウントが取れるのは残りのTwitter, Facebook, はてなブックマークだけだった。

共有数を出さない

中途半端になるからどうしようかと考えて、URLに対する各種SNSの共有数を返す自前のAPIをつくろうかと思ったけどPVの数だけリクエストされるので負荷対策を考えるのが面倒くさくなった。

何のためにそこまでするのかと考えた結果、カウント数を出さないことにした。そもそも僕は人に流されて物事を決めるのが嫌いである。だからみんなが共有しているから読むというのは天邪鬼的に嫌なのである。それを訪問者に押し付ける必要はないと思ってたけど、思い切って押し付けてみることにした。

俺だけカウント表示

共有数を出す目的はその記事がどれくらい話題になっているのか評価の尺度にしたいからだと思う。それは著者にとっても同様である。

WordPressでは管理ユーザでログインしているかどうかで分岐して管理者と訪問者とで表示を変えることができる。そこで自分がブログのWordPressにログインしているときだけ自前のAPIを使って共有数を取得して表示することにした。これなら自分がアクセスするだけの負荷しかかからないので、HerokuにAPIを実装しても問題ない。我ながら良い落としどころだと思った。

というわけで作った自分用APIはこちら。

これをherokuにあげて http://appname.heroku.com/count.json?url=xxxxx?all=1 にjQueryとかでjsonpで取ると以下みたいなオブジェクトが返ってくるんで頑張って表示する。

{url: "http://blog.makotokw.com/2014/07/11/in-trouble-redmine/",
twitter: 385,
hatena: 414,
facebook: 462,
pocket: 402,
google: 29}

スクロールしてボタンが表示されてからXMLHttpRequestを呼ぶようにしたことと、Herokuのdynoが寝てしまうので最初に表示したときは少し待たないといけない。まぁそれはdynoを叩き起こすcronでも動かせば解決するし、とりあえず今はデザイン重視で行くことにする。

Microsoft CDNが遅いのでAmazonJS 0.7.1をリリース

WordPressプラグインのAmazonJSでなかなか商品が表示されないことがあった。

このプラグインではjquery.tmplを使ってJavascriptで表示を更新している。jquery.tmplはMicrosoftのCDNにあるもの( http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js )を使っていたんだけどajax.microsoft.comのレスポンスがなかなか返ってこずローディングしたまま表示が更新されないことがあった。

jquery.tmplは2011年ごろbeta版が登場したけど、その後更新されていないのでもう1.0正式版になることはないと思っている。今じゃunderscoreのテンプレートとかでJST使うとかだろうし。jquery.tmplから乗り換えたいけど互換性がなくなるし、面倒だしで使い続けているけどそのうち最新のjQueryと互換がなくなる恐れがあるので、そのときはjquery.tmplに手を加えないといけないんだろうなーとなんとなく思っていて、その2つの理由から今回のバージョン0.7.1からjquery.tmplをAmazonJS内に同梱することにしました。まぁさすがに他プラグインとjquery.tmplの利用が衝突することは無いだろう、多分。

その他AmazonJS 0.7.1では細々とした修正をしています。

WordPressのXML-RPCの設定見直し

ふつーにPingback飛んできてた。こういうことがあるからWebサーバレベルで塞いでたんだけど、JetpackプラグインでWordpress.comと接続するのにXMLRPCを使っているらしく制限を取っ払ってた。他にも設定してたので大丈夫だろうという判断だったんけど大甘だった。

何を信用していいかわからなかったのでコードを読んで、実際に実行して確認した。そもそも前回なぜ俺は動作確認をちゃんとしなかったのか。

なお、これから書くのは全て WordPress 3.9.1 における情報となる。

続きを読む

WP GFMでTable Of Contentsに対応してみた

WordPresでMarkdown使うWP GFMを作ってて今回TOCを使えるようにしてみた。

JetpackプラグインでMarkdownが使える

WordPress.comでMarkdown記法が使えるようになった機能Jetpackプラグインで取り込まれたので、もう開発しなくていいかなと思っていたけど部分的に使えないようなのでひとまずWP GFMを継続中。(WP GFMでは[markdown]で囲った部分だけがMarkdown記法になるので他の記述やプラグインと共存が容易)

さて、QiitaでMarkdownで書いた記事に目次が表示されるようになって便利やなーと思ってた、さらにAmazonJSの説明ページがどんどん長くなって読みづらくなってきたのでTOCをつけてみようと思った。

PHP-Markdown + TOC

実装方法を検索したところjtopjianさんが、PHP-Markdownの拡張でTOC対応していた(php-markdown-extra)ので参考にさせてもらった。

PHP-Markdownにはdocument_gamut、block_gamut、span_gamutと3段階のシーケンスがあって、この修正ではまず見出しの変換を改良して<h2 id="xxx"/> のようにidをつけ、document_gamutでhタグを検索して目次を作成して追加するという処理になっている。

しかし[TOC]という文言を他の場所で使うとdocument_gamutの処理で置換の対象になってしまいよからぬことが起きたので、まずspan_gamutで[TOC]が単体で書かれている箇所にマークをつけ、document_gamutでそのマークを変換するようにした。

TOCの記法

TOCの記法、表示についてはRedmineのWiki記法を参考にした。

[TOC]は左寄せ、[>TOC]は右寄せになる。CSSスタイルも参考にした。

見出しのIDについて

これはjtopjianさんの実装によるものだが見出しを## Header {#headerId} と書いた場合に headerId をidとして使うようになっている。それ以外の場合は post-{id}-md-{n}nが連番でつくようにしている。

このブログだと連番が1から始まっていないが、調べるとこれはヘッダのmetaタグのdescriptionを記事本文を使って出力しているからだったつまりthe_contentが2回呼ばれていて、2回目のthe_contentで連番のnが続きになっている。the_contentごとにリセットすることも考えたがidが重複しないこと優先し、値は動的に変わってもいたしかたないと考えることにした。他のページからアンカーへリンクを貼りたい場合は {#headerId}を使ってIDを静的に指定すれば良い。

実行結果

このページでも使ってみているけど、AmazonJSの説明ページは全体を把握しやすくなったと思う。