「Programming」カテゴリーアーカイブ

データベースの最適化

昨日の朝、突然このサイトへのアクセスが出来なくなりました。ブログも管理画面もだめです。サーバーの管理画面やphpMyAdminにはアクセスできたのですが。サーバーの不具合だろうと思い半日ほど放っておいたのですが、まったく復旧せず、サーバー自体の障害報告もありません。

サーバーの管理会社にサポートをお願いすると、すぐに対応していただき、サイトにアクセスできるようになりました。データベースの最適化をすることで修復できたようです。データベースのオーバーヘッドによりこのような状態が発生した可能性があるとのことで、参照URLとして提示されたのが、WordPress フォーラムのトピック

そういえば最近そんな話を読んだような気がするなぁ・・・と思ったら、先週末にみやびさんがブログ記事を書いてらっしゃいました

時々phpMyAdminにアクセスして最適化も行っていたのですが、いつの間に(というか一晩の間に)それほど大きなオーバーヘッドが発生していたのか不思議です。こんなことが頻繁に起こらないよう、みやびさんの記事に従って、自動で定期的に最適化を行うように設定することにしました。最適化だけでなくバックアップも行える、プラグイン(WP-DBmanager)を使った方法を採用しました。

書かれている手順に従ってインストール・設定(セーフモード対策も)しました。wp-adminとwp-cronをCGIモードで動かすことでパフォーマンスが落ちたりしないかちょっと気になりますが、しばらくこのまま様子を見ることにします。

テーマ更新とレスポンシブデザイン

1年強ぶりにテーマを更新しました。WordPress 3.2からのデフォルトテーマ、Twenty Elevenを参考に改変を加えてみました。

分かりやすい変更はヘッダー画像だと思います。これまでもランダムに(といっても2〜3種類だけですが)変わるようにしていましたが、サイドバーにも投稿画像のサムネイルをランダムにピックアップしていましたので、これらを統合しました。タイル状に並べた画像があまり多いとごちゃごちゃして嫌だったので、12枚までに抑えて、固定ページへのナビゲーションメニューを画像の右側に移しました。

フォントの大きさだとかコメントフォームだとか(Twenty Elevenのものそのまんま)ちょこちょこと変わってますが、もう一つの大きな変更は、Twenty Elevenのレスポンシブデザインを採用したことです。iPhoneなど表示領域の小さなデバイスで表示した際には見やすいようにレイアウトやサイズが変わります。上記ヘッダー画像の数もそれに応じて減るようになってます。

このレスポンシブデザインは手持ちのiPhone (4S, 3GS)、iPad (初代)で確認しながら作業していたのですが、どうしても思い通りにCSSが適用されずに苦労しました。その原因はWebkitのバグにあり、max-widthの値を実際の値より20pxほど大きく指定しなくてはなりませんでした。これからレスポンシブデザインを採用される方はご注意ください。

参考:レスポンシブ・ウェブデザインのMedia Queriesの設定と15px

自動下書きの怪・再び

WordPressで強制的に作成される自動下書きに投稿IDを無駄に消費されてしまうのが嫌で、その原因がクイック投稿にあることを突き止め、ダッシュボードでクイック投稿を非表示にする事で対処したということを、1年ほど前に書きました。(自動下書きの怪

ところが、WordPressを3.2.1にアップグレードしてから、再びこの自動下書きが作成されるようになってしまいました。以前はクイック投稿を非表示にしていればクイック投稿関連のスクリプトは実行されなかったのですが、WP3.2からはダッシュボードをロードするだけで表示・非表示に関わらず実行されるようになったみたいです。

こうなったらクイック投稿ウィジェット自体をダッシュボードから削除してしまうしかありません。「WordPressのダッシュボードカスタマイズ | Simple Colors」を参考にテーマのfunction.phpにコードを記述して対応しました。私が削除したいのはクイック投稿だけですから、ループ部分は簡略化しました。何回か試してうまくいっているので、おそらく大丈夫でしょう。

最近のWordPressは初心者でも気軽に投稿・簡単にカスタマイズできるようにウィジェットとか充実してきました。それはそれで良いのですが、必要としない機能はユーザーが簡単にオフにできて、コードやデータベースもなるべくシンプルに汚さないで欲しいなと思います。(このテーマも実は全くウィジェットは使わずコード直書きだったりします。)

WordPress 3.1とJetpack

WordPressを3.1にアップグレードしました。

今回もいつも通りに自動更新。これまで自動更新で何のトラブルもなかったのですが、今回初めて一発ではうまくいきませんでした。「データベースをアップグレードしています」で表示が止まったまま全然先に進まなかったのです。本来なら「WordPressの更新を完了しました」の表示が出て終了のはずなのですが。

しばらくはサイトも管理者ページもメンテナンス中の表示が出て全くどうしようもなかったのですが、ある程度放置した後に管理者ページに再アクセスしてみると、「データベースの更新をしてください」という表示が出ました。指示通りボタンを押してデータベースの更新を行うといつもの管理者ページに移動しました。使用中のバージョンの表示はきちんと3.1になっているものの、画面上部に正しく更新されていないとかなんとかいうエラーメッセージがでています(スクリーンショットを取っておけば良かったと後悔)。

試しにもう一度自動更新を行ってみると、今度はすんなりと更新が進み、エラーメッセージも消えて無事更新完了。

さて、3.1の新機能ですが、やはり目立つのは管理バーでしょうか。最初は必要ないかなと思っていたのですが、使ってみると意外と便利。このブログではテーマ内にログインとか管理者ページへのリンクとか表示していないので、サイトと管理画面を行き来するのに使ってます。

更新と同時にJetpackプラグインも導入しました。レンタルブログであるWordPress.comのいくつかの機能を、自分でホスティングサービスにインストールしたWordPressでも利用できるようにするプラグインで、以下の解説が詳しいです。

WordPress.com の便利機能をインストール版に! Jetpack を導入してみた | Odysseygate.com

私が実際に使っている機能は少しだけですが、結構気に入ってます。

WordPress.com Statsは以前から単独のプラグインで使用していました。WordPress.comのサイト統計情報の表示はずいぶん前に脱Flash化・棒グラフ化され、早くプラグイン版にもにも適用されないかと待っていたのですが、現在まで反映されず(iPhone/iPadからだとFlashは見れませんから)。Jetpackの登場でやっと解決です。

Gravater Hovercardもなかなか面白いですね。

Sharedaddyは使ってみようかと思いましたがやっぱりやめました。以前使っていて現在は外しているツイートボタンの、カウント数の非整合性がやはり気になるので。

Jetpackで気になるのは、個別の機能のオン・オフがちょっと分かりにくいのと、管理画面左のメニューでサイト統計情報へのリンクがダッシュボードの下からJetpackの下へ移動したため1クリック多く必要になったことでしょうか。今後どのような機能が追加されるか楽しみです(評価機能、アンケートあたりでしょうか)。

ツイートボタン

Twitter公式のツイートボタンができたということで、早速このブログにも設置してみました。各投稿の最後にある青いボタンがそれです。該投稿について簡単にTwitterでつぶやくことができます。

同様な機能を提供するプラグインはたくさんあります。Twitterへの通知に使っているプラグインSimple Tweetでも可能です。正直そちらのほうが今は使い勝手も良いのですが、「公式」というのと今後への期待料込みで、公式のボタンを設置してみました。

設置方法は、Twitterのツイートボタンページにアクセスして、デザイン等を選択した後、表示されているコードをブログに貼付けるだけ。WordPressの場合、使用しているテーマの該当箇所に貼付けることになりますが、そのうちプラグインで簡単に設置できるようになるでしょう。

デフォルトではボタンが表示されているページのURLとタイトルがツイート内に含まれることになります。WordPressのシングルページに設置する場合にはそれで全く問題ありませんが、インデックスページやアーカイブページに設置したい場合には、上記ページで表示されるコードを各テンプレートファイルのループ内に記述しただけでは困ったことになります。表示される複数の投稿のツイートボタンは、どれを押しても表示されているページのURLとタイトルをツイート内に含むことになってしまいます。思い通りの動作(各投稿のURLとタイトルをツイートに含める)にするには、ループ内に記述するコードを例えば以下のようにしてやれば良いです。

<a href="http://twitter.com/share"
    data-url="<?php the_permalink(); ?>"
    data-text="<?php the_title(); ?>"
    data-count="horizontal"
    data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

トップページやアーカイブページでは投稿の全文ではなく抜粋を表示している場合、ツイートボタンを表示するのは個別ページだけで良いでしょう。しかし、このブログのように全文を表示している場合、読者は個別ページに行かずにトップページだけを読むことの方が多いと思われますから、こうした細工をしてみました。

もう一つ注意点があります。ボタンの横または上にツイート数のカウントを表示することができ、この吹き出しをクリックするとTwitterのリアルタイム検索の結果に飛ぶようになっています。カウントが0以外になっているのに、クリックすると表示されるページでは0件になっている場合があります(投稿日現在、このブログではすべてこうなります)。ツイート数を取得する際は短縮URLでツイートされたものもカウントしているにも関わらず、リアルタイム検索では短縮URLでの投稿はヒットしないためだと考えられます。この辺は今後改善されることを期待します。

自動下書きの怪

WordPress 3.0から新規投稿を作成する段階で自動下書き (auto-draft) というステータスでデータベースに追加されるようになりました。これまでは下書き (draft) を保存する(タイトルを入力した時点での自動保存も含む)までデータベースには保存されず、そのためプレビューを行った時などに問題があったため、このような仕様に変更されたようです。

この自動下書きは、下書きとして保存されたり公開されたりした時点でそれぞれのステータスに書き換えられるため、リビジョンとは違ってデータベースのリソースを無駄に消費しないようになっています(それが嫌で私はリビジョン機能は切ってますし、自動保存の間隔も長くしています)。新規投稿を途中でやめてしまうと自動下書きがデータベースに残りますが、古くなった自動下書きは削除されるようになっています。

ところが、データベースを覗いてみると、常に自動下書きが1つ存在します。新規投稿を途中でキャンセルしたためのものではなく、phpMyAdminでデータベースから直接削除しても、直後にまた作成されています。新規投稿を作成する際にはこの自動下書きは使用されずにまた新たな自動下書きが作成されそして通常の投稿として保存されていくので、常にこの自動下書きがデータベースに残っています。ある程度時間が経つと先に述べたクリーンアップ機能により削除されたみたいですが、今度はまた別の自動下書きが作成されてそして使用されることもなくしばらく存在し続けます。

実害はないので放っていたのですが、やはりちょっと気になるので調べてみました。WordPress 3.0を新規インストールまたは3.0にアップグレード直後から、ダッシュボードにアクセスした時点でこのような自動下書きが作成されているようです。どうもダッシュボードが怪しいと思ってソースコードを読み解いていったところ、犯人はクイック投稿でした。ダッシュボードのクイック投稿フォームが表示される際に、データベース内に自動下書きが一つもない場合には作成し、これをクイック投稿用にキープしているみたいなのです。

投稿のIDを無駄に消費したりIDが必要以上に不連続になるのは嫌ですし(細かいこだわりですが)、クイック投稿は個人的に全く使用しないので、ダッシュボードのクイック投稿を表示しないように設定してみたところ、自動下書きが勝手に作成されないようになりました。もし私と同じように気になっている方がいましたら、お試しください。

テーマを更新

WordPressを最新バージョンにアップグレードしたのを機に、自作のテーマもアップグレードしました。WordPress本体は3週間前にアップグレード済みで、その前からテーマ改変に着手していたのですが、やっと実践投入できるようになりました。ローカル環境である程度はテスト済みですが、もし表示に不具合があるようでしたらお知らせくださると助かります。

WordPress 3.0からの新デフォルトテーマTwenty Tenを元にして作ってみました。これまでのものと比べてヘッダー画像がついたぐらいしか変わってないように見えるかもしれませんが、内部的にはかなりの変更を加えています。というか、以前と同じような見た目を保ちつつ、一から作り直しています。

メインマシンがMacになりましたので、Mac上のSafariでの見え方を基準に作ってWindows上のFirefoxとInternet Explorerでもチェックするという形で作成していった訳ですが、Macに慣れてしまうと、Windowsでの表示がとても汚く見えますね。もうWindowsには戻れないかも(仕事では使ってますけどね)。

Flash CS5に何が起こったか

先週書きましたFlash CS5における不具合ですが、なんとか解決しましたので、何が起こったのかとどうやって解決したのかを書き記しておきたいと思います。同様な現象に遭遇する人もいるかもしれませんので。

Flash CS5のスタートアップスクリーンが表示されない
Flash CS5のスタートアップスクリーンが表示されない

どのような現象が起こったのかというと、Flash CS5を起動すると、通常表示されるはずのスタートアップスクリーンが表示されないのです。昨年載せましたFlash CS3の起動画面と比較してみてください。さらには、新規ドキュメントを作成または既存のflaファイルを開き、Command+Returnキーでムービーをプレビューしようとしても、ムービーが表示されません。パブリッシュはできるのですが、これでは使い物になりません。

これらは同一の原因によるもので、要はFlashムービーがCS5からロードする事ができていないのです(Flash CS5のスタートアップスクリーンはFlashムービーで実装されています)。ブラウザ上およびプレーヤー単独では問題ありませんでした。Adobe CS5 Cleanerツールを使ってAdobe製品をすべて完全アンインストールし、新規管理者アカウントでFlash CS5のみをインストールしても状況は変わりませんでした。

解決のきっかけとなったのは、ムービープレビューの際に出力パネルに表示されたエラーメッセージでした。そこにはこう書かれていました。

URL 'file:////Volumes/Macintosh%20HD/Users/[account]/Library/Caches/TemporaryItems/名称未設定%2D1.swf' を開く処理のエラー

結論としては、私のMacに重複したマウントポイントが作成されているのが問題でした(リンク先は全く同一ではありませんが類似した問題に関するAppleのサポートページです)。Macintosh HD内の/Volumesフォルダを開くと(隠しフォルダなので、Finderのメニューバーから「移動」>「フォルダへ移動」と選んで直接入力してやる必要があります)、本来ならば「Macintosh HD」という名前のエイリアスが存在しなければなりません。しかし私の Mac では「Macintosh HD 1」という名前のエイリアス(リンク先は Macintosh HD)と、「Macintosh HD」という名前の実フォルダがありました。このフォルダの中にはアプリケーションフォルダのみが存在していました。この中に入っているアプリケーションは過去のある時点でインストールされていたもののみで、最近インストールしたものは含まれていませんでした。

つまり、過去に何らかの原因で「Macintosh HD」なるフォルダがVolumesフォルダ内に作成されてしまい、名前が重複するために本来作成されるはずのエイリアスの名前が最後に「1」が付いたものになってしまっていたのです。Flash CS5は Macintosh HDを参照する際に直接Macintosh HDを見に行かずにVolumesフォルダのマウントポイントを見に行っていたのですね。本来なら/Volumes/Macintosh HD/Usersフォルダを参照しようとするとエイリアスによって/Usersフォルダが参照されるのですが、/Volumesフォルダに「Macintosh HD」という名前のフォルダが存在してしまっているためにそのフォルダ内を参照してしまい、さらにその中にはUsersフォルダもFlash CS5の関連ファイルもありませんから、ムービーがロードできなかったわけです。

/Volumesフォルダ内のフォルダとエイリアスは移動も名前の変更もできなかったので、これらをゴミ箱に移動してしまい、その後再起動すると、正しいマウントポイント(エイリアス)が自動生成されました。この状態でFlash CS5を再インストールすると、問題なくスタートアップスクリーンが表示され、ムービーのプレビューもできるようになりました。原因を特定するのに苦労しましたが、なんとか解決する事ができてほっと一安心です。

CS5にアップグレードしたものの

先月末にAdobeのCS5シリーズが発売されました。その中からPhotoshop CS5とFlash Professional CS5を購入しました。

以前書いたように、これまで持っていたFlashはWindows版のCS4。Macでは使えませんし、プラットフォームをまたいでのアップグレードも基本的に不可です。しかし、Adobeストアで購入する場合は条件次第ではクロスプラットフォームでのアップグレードに対応していただけるということで、お願いしました。なにしろ、通常版を新規に購入するのとアップグレード版では3倍以上の価格差がありますからね。その条件というのは以下になります。

  1. Adobeストアでの購入、それも電話での注文に限る(店頭パッケージやWebでの購入ではだめ)
  2. クロスプラットフォームでのアップグレードは合計で5回まで
  3. インストール時に問題が起こる可能性もある(その際はカスタマーサービスのサポートを受けること)

さて、先週製品が到着しインストールをしたのですが、少々不具合があり、現在カスタマーサポートとやり取りをしている最中です。一見ちゃんとインストールできたように見えたのですが。詳細はまた解決した後に書きたいと思います。すでにAdobe製のアプリをすべて完全削除してFlashだけをクリーンインストールするなど考えられる対処はしてみたのですが、未だに解決に至っていません。Adobe製以外のアプリケーションとの干渉が原因かもしれませんが、まだMacも買ってから日が浅く必要不可欠なアプリしか入れてませんから、それらをアンインストールしないといけないぐらいならFlashの方を諦めます。

発売日に購入した(こちらは通常版)Photoshopの方は、Flashと違い今のところ問題なさそうです。まだ特に編集作業は行ってませんけど。とにかく起動が速いです。さすが64bitネイティブ対応(Flashはどうしても32bitになりますから、かなり起動が遅いです)。最近肝心の写真撮影の方があまりできてないので、もっと撮影に出かけなくてはなりません。そうでなければPhotshopを買った意味もないですからね。そうこうしているうちに梅雨がやってきちゃいますけど、今年は梅雨ならではの写真にももっとチャレンジしてみたいです。

Simple Tweetで更新通知

このブログの新規投稿をTwitterで通知するのにfriendfeedを利用することを以前書きました(再発見friendfeedの使い道)が、先月からWordPressのプラグインを使う方法に切り替えました。

friendfeedからTwitterへの通知は即時に行われるのですが、ブログの更新がfriendfeedに反映されるのに時間がかかり、結果Twitterへの通知が遅くなるというのがその理由です。数か月前まではそんなことはなく、ブログ投稿とほぼ同時に更新・通知されていたのですが。

試用するプラグインはwokamotoさん作のSimple Tweetです。Ver.1.2.1で予約投稿の更新通知にも対応したので、先月からこちらに乗り換えました。

今日リリースされたSimple Tweet 最新版 Ver.1.3.0からはTwitterのOAuth認証に対応しています。設定がちょっとややこしいですが、wokamotoさんの説明(Simple Tweet OAuth 設定)に従えば問題なく行えるはずです。アプリケーション情報の入力で何を書いたらいいか迷うところがあるかもしれないですが、私の設定例は以下の通りです。説明ページでハイライトされているところ以外は後で編集もできるので適当でいいかも。

  • Application Iconは指定しなくてもよい
  • Application Nameはブログの名前
  • Descriptionは適当に(Simple Tweetを使ってるよ、という感じで書いておきました)
  • Application Websiteはブログのアドレス
  • Organizationとサイトは自分の名前とブログのアドレス
  • Application TypeはClient
  • Default Access TypeはRead & Write
  • Use Twitter for loginはチェックしない
  • CAPTCHAの単語が読みにくければ読めるまで「2つの単語を更新」のリンクをクリック

私は技術屋さんではないのでOAuthが何なのかよく分かりませんが、どうやらこれまでの認証方式よりもセキュアなもののようです。friendfeedからTwitterへの投稿を設定するときにも出てきたやつですね。OAuthの解説は「ゼロから学ぶOAuth:第1回 OAuthとは?—OAuthの概念とOAuthでできること|gihyo.jp … 技術評論社」が分かりやすいと思いました。

OAuthは,以下の特徴を持つ「認可情報の委譲」のための仕様です。

  • あらかじめ信頼関係を構築したサービス間で
  • ユーザの同意のもとに
  • セキュアにユーザの権限を受け渡しする

サービス間で認可情報を受け渡せると,あるサービスがユーザの認可のもとで別のサービスの管理する情報の取得/追加/更新/削除などを行えるようになります。OAuthに対応したサービスでは,ユーザが外部サービスにパスワードを教えることなく,認可情報の委譲が可能です。また認可情報の適用範囲を指定したり,有効期限を設定することができるため,ユーザが外部サービスにすべての権限を渡すこと無く,自分が利用したいサービスに最低限必要な権限のみを委譲することができます。そのためBasic認証と比べて柔軟かつセキュアな運用が可能です。

たとえば,外部サービスに自身のGmailのアドレス帳へのアクセス権限を与えたい場合,そのサービスにGmailのメールアドレス&パスワードを教えてしまうと,それらの情報が他のGoogleサービスでも悪用される危険性があります。極端な例ですが,最悪の場合は外部サービスにパスワードを変更され,Gmailアカウントを完全に乗っ取られることもあるでしょう。しかし,OAuthではパスワードを渡すこと無く認可情報を委譲することができ,さらに委譲する権限をGmailアドレス帳の読込権限に限定したり有効期限を設けることで,委譲のリスクを最小限に抑えることができます。

ちなみに、twitterfeedからfriendfeedへの乗り換えの際に参考にしたIDEA*IDEAさんでも、私とほぼ同時期にfriendfeedからWordPressプラグインに乗り換えられた模様です(ブログの更新情報はFriendfeedじゃなくて、WordTwitでTwitterに流すことにした - IDEA*IDEA 〜 百式管理人のライフハックブログ)。こちらではWordTwitというプラグインを使われているようですが、Simple TweetはTwitterなどで作者のwokamotoさんから迅速なサポートを(日本語で)いただけるのがうれしいところです(感謝!)。