http://pc.casey.jp コンピュータに関する記述とメモ Wed, 08 Feb 2012 01:21:06 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 http://pc.casey.jp/archives/153898228 http://pc.casey.jp/archives/153898228#comments Mon, 26 Sep 2011 15:03:20 +0000 admin http://pc.casey.jp/?p=153898228 WordPress はやはり記事数が増えたり、プラグインが増えたり、あるいはテーマの構造などによって速度が落ちてくる。そこで、キャッシュ関連ツールを使ったり、APC を利用したりして体感速度や実際の動作速度を向上させる。 キャッシュ関連では「WP-SuperCache」「W3 Total Cache」「QuickCache」などがある。QuickCache は導入が簡単なキャッシュプラグインだそうだ。 WP-SuperCache は高度なキャッシング機能を提供するプラグインで多くの利用者がいる。WP-SuperCache がアクセスされたページをキャッシュするのに対して、W3 Total Cache はアクセスされたページだけでなく、データベースへのクエリキャッシュやAPC への対応などより高度で広域なキャッシングを提供する。WP-SuperCache の場合は「DB Cache Reloaded Fix」 を利用することでページキャッシュの他にデータベースへのクエリキャッシュを行うこともでき、「WP Widget Cache」を利用するとウィジットに対してのキャッシュも可能だそうだ。 ※WP-SueprCache 環境下でウィジットに対してのキャッシュ処理を追加する必要があるかは不明なのと、各ウィジットに対して設定するのが面倒だったでテストのみ行った これらのページキャッシュ機能は、アクセスされたページがキャッシュされていないか、期限切れの場合はキャッシュして「次回以降」のアクセスを高速化する。WP-SuperCache はレガシー、PHP、mod_rewite に対応していて、プラグインの説明によるとmpc_rewite が最も高速に動作し、PHP は同等の機能をより柔軟な環境で動作できるそうだ。 さて、高機能なWP-SuperCache には「プリロード」という機能もある。JavaScript でマウスオーバーの際に画像切り替えをスムーズに行うために予め読み込んでおく機能があるが、これに似ている。つまり、「予め」作っておくというもの。 該当するページへのアクセスがあったら、データベースへ何度もアクセスし、計算して結果を返すのではなく、予め作っておいた結果を返すため、高速に動作する。実際に利用したところ、超高速だった。ただし、これには予め作成する工程が入り、その負荷が大きかった。 負荷が多く、高速化するためにプリロード機能を利用して、高速化やCPU の負荷を下げることはできるが、予め作成するとCPU をその時に大きく消費する。ただし、高速化の恩恵は計り知れない。まるでカリカリにチューニングされた専用サーバーを利用しているかのようだった。 ちなみに、これらの機能はファイルを生成するため、PHP がCGI 版で動作しているか、動作させることの出来る環境でなければ性能を十分発揮できない場合がある ※プリロードの場合、JavaScript によるアクセス解析が埋め込まれている場合はおそらく正常に動作するだろう。しかし、PHP によるアクセス解析が動作するのかは調べていない。もし、データベースにアクセスせず返答しているなら記録されないかもしれない。 ※APC については別のページでサーバーごとに記事があります ※現在、本サイトではWP-SuperCahce のプリロード機能を利用していません（記事数が多いためCPU 使用率が・・） この記事を読んだ人は、こんな記事にも興味をもっていますWindows8 がインストールできなかった[WordPress] サイト移転時の WP-SuperCache 設定修正[WordPress] 高速化プラグイン – W3 Total [...]]]> http://pc.casey.jp/archives/153898228/feed 0 http://pc.casey.jp/archives/153898039 http://pc.casey.jp/archives/153898039#comments Sun, 25 Sep 2011 03:03:27 +0000 admin http://pc.casey.jp/?p=153898039 ダウンロード 機能の違い – 国産オープンソースPHPアクセス解析CGI – Research Artisan Lite – リサーチアルチザンライト インストール ダウンロードしたzip ファイルを解凍し、public_html 内のra とra_core をFTP 転送する。 今回は次のような構成にした。 /public_html/ral/ra/ /public_html/ral/ra_core/ ※解凍したファイル構成はra_core がpublic_html より上位階層にあったので、public_html 以下に配置するのはよろしくないかもしれない http://設置URL/ral/ra/analyze/index.php にアクセスする。 問題がある場合の例 環境設定に失敗しました。以下のディレクトリのアクセス権（パーミッション）を書き込み可能にしてください。 /virtual/*****/public_html/******/ral/ra/setting 以下の .htaccess を設置して再読み込みすると問題なくアクセスできた。 AddHandler application/x-httpd-phpcgi .php データベース設定 データベースに接続するためのアカウントを設定する。プレフィックスに対応している。 サイト名とURL 、管理画面へのアクセスパスワードを設定する。 解析タグが表示されるので、メモしておく。 ログインをクリックする。 ログイン 設定したパスワードでログインする。 解析画面へアクセスできた。今はまだ何もない状態。 運用後に以下のメッセージが表示されることがあるので対処しておく。 ※セキュリティ警告：以下の「setting」ディレクトリのアクセス権（パーミッション）が書き込み可能になっています。 /virtual/****/public_html/*****/ral/ra/setting/ ※マルチサイトに対応させることはできるし、その方法はマニュアルにも記載されている。ただし、推奨されていないので何らかのトラブルに見舞われる可能性がある。参考文献によれば、特にトラブルはなく運用されているようだ。 解析タグの例 解析タグ <script type="text/javascript" src="http://log.example.com/ral/ra/script.php"></script><noscript><p><img src="http://log.example.com/ral/ra/track.php" alt="" [...]]]> http://pc.casey.jp/archives/153898039/feed 0 http://pc.casey.jp/archives/153898037 http://pc.casey.jp/archives/153898037#comments Sat, 24 Sep 2011 15:03:46 +0000 admin http://pc.casey.jp/?p=153898037 WordPress プラグイン「WP-SlimStat-Ex」のコア部分がSlimStat というアクセス解析プログラム。逆に言うとSlimStat をWordPress から利用できるようにしたのがWP-SlimStat-Ex などだ。必要な情報が即座にわかり、日本語などのマルチバイト検索語などにも対応している。 ただし、少なくとも「WP-SlimStat-Ex」ではデータベースに格納するデータが肥大化してしまう問題と、そのデータを完全に削除する機能が見当たらない（古いデータを削除する機能はあるのだが・・）。検索して出てくるのはテーブルを削除するというもの。これが長時間のサイト運営や、アクセスの多いサイトなどでは数百メガを超えるデータ量になってしまい、データベースなどのバックアップファイルを転送するプラグインの実行に支障が出ることもある。不思議なことはこの問題に触れたサイトと検索で出会えないことだ。 ダウンロード SlimStat: Download インストール Step1/3 FTP 転送し、URL をブラウザからアクセスする。設定を行うように表示されるので、ファイルを開いて設定を行う（後述）。Next Step へ進む。 Step2/3 Next Step へ進む。 Step3/3 Next Step へ進む。 Finish をクリックし、ファイルを調整する（後述）。 設定 設定はconfig.php で行う。 データベース設定 /** Database connection */ var $db_server = 'localhost'; // Leave as localhost unless you know otherwise var $db_username = 'username'; // The username used [...]]]> http://pc.casey.jp/archives/153898037/feed 0 http://pc.casey.jp/archives/153897667 http://pc.casey.jp/archives/153897667#comments Thu, 22 Sep 2011 15:03:12 +0000 admin http://pc.casey.jp/?p=153897667 負荷が高い状態が続いている。 この問題を解決する方法は多岐に渡るが、まずは不要なプラグインの停止などできるところから手をつけていく。 本サイト内ではソースコードをわかりやすく表示するためにハイライターを使っている。これはPre タグとJavaScript を利用して実現される。 行番号や言語ごととの予約語を強調表示できるなどのメリットがあるが、閲覧者側ではJavaScript の読み込みまで描画が停止する場合もある。またサーバー側ではJavaScript の記載された外部ファイル*.jsをリクエストされ転送量などに影響する。 前者についてはhtml 内の記述場所を変更するなどの対応を行うか、Header Clean などのプラグインを利用することで体感速度を上げることができる。しかし、利用端末によっては正しく表示できなくなったり、高度な設定が必要なる。なによりプラグインが増えてしまう。 後者は外部（自サイト以外）から読み込ませることで自サーバーへのリクエストを減らすことができる。自サイト内で完結したいが転送量を気にする場合は”圧縮記法”によるものを利用することで幾分対策ができる。 例えばGoogle へアクセスして、そのページのソースを表示させれば人間には読みにくいコードになっていることが確認できる。これは人間が読みやすいために改行などを入れて記述した後、公開時に不要なコードを減らすことで全体的な転送量を減らす意味がある。 また、実は本サイトは現在ハイライターが２つ入っている。以前利用していたものと、現在利用しているもの。互換性がないために以前から利用していたプラグインを停止すると、閲覧者が見づらくなるほかWordPress 内で特別な意味を持つショートコードが表示されてしまう。それでも記事自体は表示できる。 後者のプラグインを現在採用しているにはそれなりの検討があってのことだが、もっとも評価した点は不要な場合に動作しないこととスクリプトを記述する位置だ。不要な場合に動作しないことは至極当然と思える動作だが、プラグインは読み込まれた時点で何かしらの動作を行うものもある。（以前の自分が十分に検討した結果だから他にも様々な理由があったとは思うが、うろ覚え） さらに、サイト開設時などには広く一般には存在しなかったデバイスも、現在は注視すべき利用者の数となっていて、多様化もしている。彼らに対しての配慮も必要だ。また、筆者もそのユーザの一人である。 ※各アクセス解析結果も参照した ソースコードやテキストのためのCSS 前置きが長くなったが、２つのプラグインを停止させ、代わりにCSS でそれなりに見やすく伝えるためにはどうしたら良いかを考えて、pre タグを再定義することにした。もちろんこれが絶対完全に正しい唯一の選択だとは思わない。まずはできるところから。 参考コード pre {   padding: 1em;   margin-left: 10px;   margin-bottom: 10px;   margin-top: 10px;   font-family: monospace,sans-serif;   color: #666666;   background-color: #f2f2f2;   white-space: -moz-pre-wrap; /* Mozilla */   [...]]]> http://pc.casey.jp/archives/153897667/feed 0 http://pc.casey.jp/archives/153896848 http://pc.casey.jp/archives/153896848#comments Sat, 06 Aug 2011 21:24:09 +0000 admin http://pc.casey.jp/?p=153896848 Firefox5 を利用しているが、一瞬フリーズする「プチフリ」が多くなってきたので、この問題を解決する方法を探してみる。 JavaScript 関連の調整 → 改善は見られなかった Flash を最新版にする → 改善は見られなかった ブックマーク browser.bookmarks.livemark_refresh_limit_count を5  に設定 → 改善は見られなかった Reindex Reindex を実施。少しフリーズ時間が短くなった気がする。 履歴の削除 ところで、「よく見るページ」を表示するのにとても時間がかかることと、ブックマークバーの操作中にプチフリすることが多いような気がした。内部機構は知らないが、よく見るページはこれまでの表示を計算して求めているのだろうから、これに時間が書かているのかもしれないという見当をつけた。 すべての履歴を削除し、念のためデータベースの最適化も行っておく。 → 現在のところ、これで問題が解決しているように見える。だから以下は未実施だが、メモとして残しておく。 セッション保存インターバルを伸ばす browser.sessionstore.interval の数値を変更。 ※5分なら300000 → 未実施 Microsoft .NET Framework Assistant を無効にする Microsoft .NET Framework Assistant を無効にする。 → 未実施 # もしかしてGoogle 日本語入力？IME の時、そのような現象がimode.net で起きた。 参考文献 Immortality.Blog　 Firefox のプチフリ Firefox 3.5以降のプチフリーズに関して – 正統納豆天国ブログ [...]]]> http://pc.casey.jp/archives/153896848/feed 0 http://pc.casey.jp/archives/153896364 http://pc.casey.jp/archives/153896364#comments Mon, 20 Jun 2011 17:39:53 +0000 admin http://pc.casey.jp/?p=153896364 Firefox には MakeLink というアドオンがある。これは閲覧中のURL やタイトル、テキストなどを任意のリンク形式にしてくれるもので非常に重宝している。Google Chrome ではどうすればよいだろうか。 MakeLink ジェネレータ 「MakeLink ジェネレータ」というものを見つけた。 オンライン試用 My Utility－Make Link ジェネレータ これはJavaScript を自動生成してくれるツールらしく、できあがったものをブックマークしておくことでいつでも利用できる。 コード例 javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<a href="'+location.href+'">'+document.title+'</a>';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})() Create Link その他には拡張機能としてインストールするタイプの「Create Link」というものがあった。 ダウンロード Create Link – Chrome ウェブストア コード例 <a href="https://chrome.google.com/webstore/detail/gcmghdmnkfdbncmnmlkkglmnnhagajbm#">Create Link - Chrome ウェブストア</a> 感想 どちらも同じようなコンセプトのものだが、Firefox 版のMakeLink と決定的に違うのは（少なくとも調べた範囲で）Html Entity を生成できないこと。 HTML やマークダウン環境ならいずれも問題ないが、筆者はこの記事をWordPress のビジュアルエディタで書いている。したがって、コードを追加する場合にはコードを表示させなければならない。Firefox 版のMakeLink の場合にはこの手間がなく、ペーストすれば装飾されたリンクテキストがエディタに挿入される。 残念ながらどちらも欲しいものとは違うようだ。 参考文献 Google Chrome [...]]]> http://pc.casey.jp/archives/153896364/feed 0 http://pc.casey.jp/archives/153895477 http://pc.casey.jp/archives/153895477#comments Sun, 01 May 2011 15:03:43 +0000 admin http://pc.casey.jp/?p=153895477 IMM-Glossary DHTML によるポップアップが利用できるようなので、使いたかったのだがプラグインの最終更新が最近行われていないらしく、WordPress 3.1.1 に導入したところ壊れてしまった。 このようなクエリエラーが表示され、どのページも表示できなくなってしまった。FTP で接続し、該当プラグインディレクトリを削除した。 ・・・と思ったら同様の名前でもうひとつ見つけた（IMM-Glossary Glossy Ver.3.1）ので、インストールするとWordPress 3.1.1 でも動作した。 用語の登録 オプション Icon 虫眼鏡アイコンを表示するか Pop Up No Pop Ups (original behavior) ポップアップせず、該当用語のページに遷移する。 Standard JavaScript (window.open) 標準的なJavaScript で新規ウィンドウを開く。文字化けするので参考文献の対処が必要。 Custom JavaScript & DHTML Tool Tips カスタムJavaScript とDHTML によるポップアップ・ツールチップを表示する。大変便利だが、毎度データベースに問い合わせしているようで、負荷が気になるところ。 ※いずれも検索してインストールはできないようなので、作者ホームページからダウンロードする必要がある。 ダウンロード IMM-Glossary WordPress Plugin Plugin: IMM-Glossary Glossy * jamesturner.co.nz 参考文献 WordPressプラグイン、IMM-Glossaryを使ってみた | ぢぢらぶろぐ WordPressの用語集プラグイン – S-page [...]]]> http://pc.casey.jp/archives/153895477/feed 0 http://pc.casey.jp/archives/153894000 http://pc.casey.jp/archives/153894000#comments Sun, 06 Mar 2011 15:03:02 +0000 admin http://pc.casey.jp/?p=153894000 TweetMeme のように薄すぎない存在感と邪魔にならない謙虚さをもち、既存のすべての記事に目次を挿入したかったのだが多くのプラグインはそのような構造になっていなかった。 これから記事を書くとか、ページ数が少ないとか、内容が盛りだくさんの時だけ目次をつけるとか、そういった場合には良かったのだが既にこれだけの記事数があると自動挿入して欲しかった。（表示させないコードがあって、それが含まれている時だけキャンセルできるよプラグインもあったから、そのような構造にしてくれればもぅ…） おそらくWordPress のことだからコードを改変すれば可能だろうし、コードを改変しなくてもTweetMeme のCSS を真似るなどすれば可能なのだろうけれど…。 Search Regex で先頭に強制的にコードを挿入してしまうか、テンプレートファイルあたりを変更してプラグインの影響を受ける前にコードを挿入してしまうなど方法がないわけではないけれど。 しかし、探せば必ず答えてくれる豊富なプラグイン、すごいなー。 Table of Contents Generator インストールは ylsy_toc.php をプラグインディレクトリにアップロードして有効化 記事中に <!–TOC–> を入れると置換される 表示を変えたいときは /wp-content/plugins/ylsy_toc.php を編集する サイドバーなどテンプレートファイルに入れるときは <?php echo $post->post_toc; ?> 一番使われているようだが公式から検索＆インストールはできないようだ ダウンロード：Table of Contents Generator WordPress plugin | SYP 参考：hnタグから目次を作成するWordPressプラグイン「Table of Contents Generator」 参考：power source* » WP plugin[up]: 目次生成 – Table of Contents Generator をアップグレード 参考：Table [...]]]> http://pc.casey.jp/archives/153894000/feed 0 http://pc.casey.jp/archives/153889814 http://pc.casey.jp/archives/153889814#comments Thu, 21 Oct 2010 11:56:44 +0000 admin http://pc.casey.jp/?p=153889814 Head Cleanerを使うと体感速度の向上が得られるという。サーバー側での高速化はキャッシュプラグイン（WP-SuperCache等）で行うが、こちらはクライアント側。仕組みは参考文献で詳しく解説されているが、画面描画に必要な情報をブラウザに優先的に与え取り敢えずの表示を行ない、その後スクリプトなどを転送するのだという。また、重複する情報の統合などもやってくれるのだそう。 明確なベンチマークは行わなかったが、体感速度が向上したと感じられた。 「＜head＞ 内の JavaScript を、フッタ領域に移動」 と 「デバッグモード」 だけチェックを外してます。　「＜head＞ 内の JavaScript ・・・」 を外したのはチェックを入れると 飛び出すメニュー jQuery droppy が効かなくなるため。 （「Head Cleaner – サイトのヘッダとフッタを整形し最適化&高速化を行うプラグイン」より引用） ※その他にもHead Cleaner と WP Super Cache を同時に動作させる際の問題点 : dogmap.jpというページもあった。今のところHead CleanerとWP-SuperCacheをWordPress3.0.1で同時に使っているが特段問題ない。キャッシュ期限が切れた際などに問題に遭遇するのかもしれないが。 参考文献 サイトの表示が遅いので高速化方法を調べて実施 WordPress Plugins/JSeries » Head Cleaner (最適化＆高速化) Head Cleaner – サイトのヘッダとフッタを整形し最適化&高速化を行うプラグイン Head Cleaner と WP Super Cache を同時に動作させる際の問題点 : dogmap.jp ダウンロード head-cleaner.1.3.10.zipをダウンロード [...]]]> http://pc.casey.jp/archives/153889814/feed 0 http://pc.casey.jp/archives/2972 http://pc.casey.jp/archives/2972#comments Wed, 22 Sep 2010 08:57:59 +0000 admin http://pc.casey.jp/?p=2972 開発者やデザイナにオススメのアドオン。 Html Validator Html Validatorを使うと正しいHTMLになっているかなど細かく調べることができる。また、調べるアルゴリズムも選択できる。iPhone ではSafari をデバッグモードにすることで同様の結果を得ることもできる。 「Html Validator」は、XHTML のバリデーション以外に、アクセシビリティのチェックや、ソースコードのクリーンアップ（ソースの自動修正）まで行ってくれるスグレモノで、Firefox ユーザにはポピュラーな機能拡張のひとつです。 （小粋空間: リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」 より引用） Dreameweaverなどの専用ソフトでHTMLを作っている場合は気にならないが、テキストエディタなどでHTMLを直接作る場合、HTMLがW3Cに準拠した形になっているか心配になる。    　また、デザイナーからもらったHTMLソースコードにサーバサイド側の処理を組み込んでいく際、間違った文法のHTMLになっているケースがある。 JavaScript実行後のHTMLの文法チェックまで行うことができる。その場合は、ステータスバーのHtml Validatorのアイコンで右クリックし、上級メニューから選ぼう。 （快適なWeb開発環境を構築する、Firefoxアドオン10選 － ＠IT自分戦略研究所 より引用） Firebug Firebug は JavaScript、HTML、CSSのデバッグができるアドオン。Edit CSS同様に、書き換えを行うとリアルタイムでその結果を見ることが出来る。FirebugのCSS関連を抜き出したものがEdit CSS と言えるかもしれない。 ツールは2ペインになっていて、初期表示では、左側にHTMLツリー、右側にスタイルシート、の領域に分かれている。 HTMLツリーには、表示しているページのHTMLの構造がツリー上に表示されているので、階層構造を簡単に確認できるメリットがある。さらにスタイル シートの部分を見ると、指定されているスタイルがどのように適用されているかが分かるので便利だ。 （快適なWeb開発環境を構築する、Firefoxアドオン10選 － ＠IT自分戦略研究所 より引用） Edit CSS Edit CSS はウェブページのCSSを直接書き換え、その結果をリアルタイムで見ることが出来るアドオン。 CS Lite CS Lite を使うとCookieの情報を確認、編集することができる。 参考文献 快適なWeb開発環境を構築する、Firefoxアドオン10選 － ＠IT自分戦略研究所 [...]]]> http://pc.casey.jp/archives/2972/feed 0