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/153899451 http://pc.casey.jp/archives/153899451#comments Sat, 28 Jan 2012 15:03:07 +0000 admin http://pc.casey.jp/?p=153899451 HTML は長らく使っているし、商用ソフト、フリーソフトなど知っている。HTML が文章を定義するものであったものから次第にデザインに利用されるようになり、スペーサーgif やテーブルレイアウトが一般的になりつつあった。このあと、CSS が登場してHTML は文章定義にもどり、デザインはCSS に書くようになった。これはSEO 対策の１つでもあった。 が、CSS はどういうわけか苦手で、その辺逃げ回っていた。といっても完全には逃げ切れないから、だましだましスクリプトの中に必要最低限書いたり、すでにできてい るものの改造程度くらいだった。だが、スマートフォンやデザインがより重要視されるようになってきたこともあって、この苦手な分野にももう少し理解を深め なければならないようだ。 直感的なCSS エディタを探す すっかり逃げ回っていた間に、きっと素晴らしいツールがしかもフリーで出回っているはずだ！と勝手に期待と思い込みを練り込み探すことにした。 すでに書いたように、基本の「き」くらいを書いたり改造したり読んだりはできる。例えば１から作らなければならないような場合に何か良いエディタは無いものか、というのが今回の趣旨だ。 メモ帳に始まりオンラインエディタ、ツリーエディタ、ソースエディタなど様々な選択しがあるが、GUI という意味ではないビジュアルな勝手の良いものを探したい。細かいところは仕方なしに自分で作るにしても、２カラム３カラムなど超基本よりは少しはみ出る ようなものを探したい。 オンライン YAML Builder YAML Builder | A tool for visual development of YAML based CSS layouts CSS（スタイルシート）のソースを書いてくれるエディタがあるページ CSS（スタイルシート）のソースを書いてくれるエディタがあるページ 好みの数値を入力するだけで、思い通りのCSSソースを簡単に書いてくれるエディタがこんなに沢山あるとは。（「CSS（スタイルシート）のソースを書いてくれるエディタがあるページ」より引用） DrawAble Markup Language Drawter.com – DrawAble Markup Language CSS Maker CSS Maker – スタイルシート簡単作成ツール 選択肢から選択する程度でスタイルシートを出力してくれる。 CSS Type [...]]]> http://pc.casey.jp/archives/153899451/feed 0 http://pc.casey.jp/archives/153898825 http://pc.casey.jp/archives/153898825#comments Wed, 28 Dec 2011 04:15:41 +0000 admin http://pc.casey.jp/?p=153898825 WordPress は進化し続けている。 先日の更新ではファイルのアップロードがドラッグ・アンド・ドロップに対応し、より便利になった。しかし、筆者が投稿する幾つかのブログではファイルのアップロード数が多いこともあり、プラグインを使って多数のアップロードと多数のインサートを行なっていたため、あまり恩恵はないかなと思っていた。本来、正しくSEO やユーザビリティを考えれば、１枚ずつアップロードして適切な名前やキャプションなどを設定することが望ましいとは思うが、面倒だ…。 ところが、（私見が多分に含まれるとは思うが）ドラッグ・アンド・ドロップでのアップロードが可能になると、個別の設定がどうやらさほど筆者には苦労ではなくなったから不思議だ。また、適切に名前を設定しておけば、同じ画像を使いまわす際の検索でも恩恵を受けられ、ひいては転送量の削減、訪問者が全体読み込みに要する時間削減にもつながっていくと思われる。 # ちなみにプラグインを停止すると、複数アップロードしたときに複数のインサートに不便を残した。まだ必要らしい。 PING による通知とマルチサイト構成 さて、これと直接深い関係はないが、WordPress はブログシステムだ。（もちろんブログに限らず、コーポレートサイトなども作成できる無限の拡張性、可能性がある） ブログとSEO を考えた場合、RSS などによって読者に更新を伝えたり、sitemapで検索エンジンに通知したりして、より多くの訪問者に来てもらいたいと考える。通知方法の１つに ping があり、この機能を活用すると、新着記事として通知先のサイトに掲載されるとのこと。これは投稿された事をより多く素早く伝える意味の他に、被リンク 数を稼ぐという恩恵を期待できると参考文献では主張している。 筆者はその辺はあまり熱心ではないが、ひょんなことからマルチサイト構成の際にPING 通知を行う設定が消えているという記述と、その復活の方法に触れた記事を幾つか目にした。最も多い内容は復活のためにプラグインを導入する方法が解説されていたが、標準機能でも設定できることが参考文献からわかった。ただし、これには１ つの通知先しか設定できないとのこと。 筆者のブログではもともと標準で使っていて、その標準通知先がそのままマルチサイト構成でも記載されているので 特に何があるわけではないが、スクリーンショットなどを残しておく。 スクリーンショット WordPress 3.3 シングルサイト構成 「更新情報サービス」の項目が存在する。 WordPress 3.3 マルチサイト構成 WordPress 3.3 でマルチサイト構成を行なっている場合の「子ブログ」に該当するブログには、「更新情報サービス」の項目がない。 子ブログは「利用者」という位置づけだが、親ブログとなるシステム全体を管理する「特権管理者」で、個々の子ブログの編集画面を表示させると「更新情報サービス」が登録されていることがわかる。 上の画面をスクロールしていくと「Ping Sites」の項目があり、その値に通知先アドレスが記載されている。プラグインなしの標準機能で管理可能だが、複数の通知先を設定することはできないようだ。 プラグイン プラグインを使って「更新情報サービス」をより便利に使う方法もある。この場合、通知が成功したか失敗したかなども把握できるとか。ただし、「更新情報サービス」が外されたとすれば何かしらの理由があるわけだから、注意してプラグインを利用したほうが良いという記述も見受けられた。 ダウンロード WordPress › Activate Update Services « WordPress Plugins 参考文献 wordpressマルチサイトを導入してPing送信先を指定できなくなったら？ | 検索エンジン無料登録　千客万来どっとコム WordPressのpingの送信設定 – WordPress初心者のカスタマイズ日記 WordPress3.x [...]]]> http://pc.casey.jp/archives/153898825/feed 0 http://pc.casey.jp/archives/153898045 http://pc.casey.jp/archives/153898045#comments Wed, 28 Sep 2011 03:03:57 +0000 admin http://pc.casey.jp/?p=153898045 以前CGI 版で404 レポートを出力するプログラムを作ったのだが、今回はPHP 版を作った。何故つくろうかと思ったかというと、WordPress などにはプラグインで機能するものがあるが、これらを利用しないサイトでも移転した際の案内を付けたかったから。 ところで、疑問に思うのは同様のプログラムを見つけることができないのは何故だろう。見つけ方が悪いのか、それとももっと高次元（Apache のログを解析するなど）で行われているのか。あるいはGoogle のウェブマスターツールなどでも404 がどこで発生しているかを見つけることはできるから、そういったものを使っているのだろうか。 WordPress などのCMS には404 時の動作を定義したり、改造したり、プラグインを導入したりすることで発見から対策までを容易にしている。今回作るプログラムは単体で動作するように設計しているので、どのサイトにもPHP が利用できる環境であれば使えると思う。 期待する動作 .htaccess で404 時に本プログラムを指定する 本プログラムはユーザ、Bot 等に対してHTTP ステータスコード 404 を返す 同時に検索語が解析でき、移転先へクエリを転送できる場合は案内する 同時に管理者に対して404 の発生を知らせる 管理者は必要に応じて .htaccess を更新し、適切なページにリダイレクトさせ404 を軽減する バージョンアップ 公開までに少し運用して改良したところ Ver.0.04- favicon やrobots などを報告しないようにする$reject 配列を追加し、合致した場合は報告しない（完全一致のみ）。 ※Ver.0.03 でも搭載したが、ハードコーディングだったのを改善した Ver.0.05- 攻撃を目的としたアクセスの多くがReferer を持っていないことから、Referer を持っていない場合に報告しないようにする設定を追加した。$need_referer をfalse にするとreject に合致しなければ全件報告するので、どんな攻撃を受けたか見ることができる。ちなみにレポートが来たということは404 で弾いたということになる。その他Ver.0.05 ではいろいろ弄ったので新たなバグを内包したかも。 動作例 コード <?php /* ===================================================  *  404 [...]]]> http://pc.casey.jp/archives/153898045/feed 0 http://pc.casey.jp/archives/153898047 http://pc.casey.jp/archives/153898047#comments Tue, 27 Sep 2011 15:03:55 +0000 admin http://pc.casey.jp/?p=153898047 404 エラーは、閲覧しようとしたページが見つからないというステータスコード。 慣れている人間が目撃すれば、たくさんある404 ページの１でしかない。しかし、一般的な閲覧者からすれば、無機質なNotFound 画面だけではページが存在しないことに気がつかず、インターネットに接続されていないとかパソコンが壊れたとか言い出すこともある。 また、ユーザビリティからすれば、適切な対応や表示をすることが望ましいし、SEO やPV を増やすことにつなげるなら、何かしらの対処が必要だ。 WordPress 関連の404 を調べると、503 時と同じく、404 時の場合のカスタマイズが多くヒットする。無機質な404 よりはカスタマイズされた404 はありがたいが、404 がどこで発生しているかをつかめれば.htaccess で新しいページに誘導することもできるだろうし、正しく表示できていないページを発見することもできるかもしれない。 404 が起きているかを調べる 404 Notifier - 404 ページをメールまたはRSSフィードで通知 設定・オプション 設定は簡単で、特にナニもしなくてもそのまま使える。メールアドレスを入力してチェックボックスをチェックするとメールが送られてくる。リンクになっている文字列をクリックするとフィードにアクセスできる。 メール通知にすると大量のメールが送られてくる＆送信している者になる可能性があるので注意が必要。 参考文献でもフィードでの受信をすすめている。 JH 404 Logger – 404 表示回数をダッシュボードに表示 404 表示回数をダッシュボードに表示してくれるらしい。（未試用） 404 時に類似ページを案内する 404 SEO Plugin - 404 ページにサイト内の関連ページリンクを表示 404 Notifier は404 を通知することで404 になることを減らすことに役立つが、管理者がその対応をするまで訪問者には何も伝わらない。404 SEO Plugin は、関連ページを表示してくれる。「Smart 404」も同様の動作をする。 ※このプラグインは見つからなかったので以下のプラグインを試用した SEO Auto Links & [...]]]> http://pc.casey.jp/archives/153898047/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/153898033 http://pc.casey.jp/archives/153898033#comments Fri, 23 Sep 2011 15:03:10 +0000 admin http://pc.casey.jp/?p=153898033 ウェブサイトのアクセス解析は、どのようなニーズがあるか、どのようなページに人気があるかなど知ることができる重要なツールだ。また、サーバーの負荷とアクセスの相関関係をわかりやすく見ることができ、クラウド環境下のサーバー配置計画にも一役買うかもしれない。 最も基本的なアクセス解析はApache のログだ。これにはウェブサーバが応答したすべての記録がある。このログを見やすくするツールもある（→ Apacheのアクセスログを解析するフリーソフト4種）。 さくらインターネットでは「Webalizer」によるアクセス解析を提供しているが、１日１回のデータ更新らしく、リアルタイムまでは必要ないとしても、少しばかり不満が残る（ただし、サーバーのレスポンスコードでアクセス過多による503 が発生していないかなどを知るには重要だろう。後述するGoogle ウェブマスターツールでも503 などは知ることができる）。 Google ウェブマスターツール 「Google ウェブマスター ツール」は、無料で利用でき（ほぼ）何もしたくない人におすすめ。サイト内におけるキーワードの重要性や404 の発生状況などを知ることができる。その他にも多くの情報が得られるが、自サイトの応答速度なども知ることができる。 この画像ではサーバー移転したことによって応答速度が改善したことが把握できるが、それでもさらに高速で有るべきだとGoogle はアドバイスしている。 ※クローラのアクセス頻度調整を行うために否応無しに利用を迫られることもあるだろう Google Analytics 「Google アナリティクス」 は500万PV まで無料で利用できるアクセス解析だが、リアルタイムではない。しかし、多くの情報を取得することができ、またビジュアルな表示でわかりやすい。 多くの利用者がいて、自分でサーバーなどを管理する必要がなく、解析タグを貼りつければよいだけと敷居も低い。また、Adsense の成果も確認できる。 WordPress WordPress でサイトを運営している場合は幾つかのプラグインによってアクセス解析が可能。WordPress を利用しているということは既にデータベースなどの準備が完了しているということなので、プラグインを追加するだけで良い。 主なものに「WordPressStats」「WP-SlimStat」「WP-SlimStat-Ex」「Counterize II」がある。また、記事ごとのアクセス数をカウントするプラグイン「PostViwes」もある。 WP-SlimStat →　SlimStat を参照（後日公開） WP-SlimStat-Ex →　SlimStat を参照（後日公開） Piwik Piwiki の特徴といえば複数サイトに標準対応していること。これによって解析専用のサーバーやデータベースを設置することもでき、それらを各サイトから呼び出すこともできるだろう。 →　Piwik を参照（後日公開） Research Artisan Lite 基本的にはシングルサイト用で公式で非推奨になっているものの、複数サイトに設置する方法や動作報告が確認できる。 →　Research Artisan Liteを参照（後日公開） 高機能アクセス解析CGI 「高機能アクセス解析CGI Professional版」は、外部に設置することもできるアクセス解析として重宝する。フリー版として「高機能アクセス解析CGI Standard版」がある。必要な情報はほとんど取得でき、特定日のアクセス状況を把握することもできる。また、生ログ解析機能もあるからIP アドレスなどから検索することもできる。データベース不要で動作し、ログローテーション機能も複数用意されている。 ※あまりお見せできないものなので、掲載画像が不鮮明になっています 参考文献 Piwik 高性能アクセス解析オープンソースソフト [...]]]> http://pc.casey.jp/archives/153898033/feed 0 http://pc.casey.jp/archives/153893869 http://pc.casey.jp/archives/153893869#comments Sat, 05 Mar 2011 15:03:08 +0000 admin http://pc.casey.jp/?p=153893869 WordPress はコンテンツ作成に重宝する。豊富なデザインテンプレートがあり、簡単にページを編集できるからだ。さらにプラグインを用いて様々な機能を追加することもできる。WordPress とMovableType はよく比較されるが最も違うことは前者が動的で後者が静的であること。 どちらもページの作成の過程は同じそうだが、WordPress はデータベースに情報を格納し、必要なときに取り出す。それに対してMovableType は「再構築」という作業を行い、静的ファイルを作成する。 動作としてはMovableType のほうがサーバー負荷やユーザの待ち時間が小さいように思える。特に大規模サイトになると便利だろうと思ったが、利用者の意見では大規模になるほど再構築に時間がかかってしまうということだ。 （ただ、バシバシアクセスされることを想定すると、再構築のコストよりデータベースサーバーへ掛かるコストを考えると再構築もアリだと思う。が、ブロガーなど頻繁に更新する「利用者」の視点からみると分からないでもない。それに、負荷軽減と高速化のためにキャッシュを利用する事を考えれば…。） ここでは仮想的な .html アクセスと、実際に .html ファイルを生成する事について書く。 仮想的なHTML ファイル まずは一般的に行われている作業、見せかけのhtml。これはApache のmod_rewrite を使ったもので XXX.html にアクセスされたら .html を無視して（実際は内部転送）XXX というID （または別名）の記事を探して表示するもの。これはSEO に効果があると言われている。 WordPress ではパーマリンク設定を行うことでとても簡単に実現できる。上図のようにカスタム構造を選択し、末尾に .html を付け加えるだけで良い。 「投稿」を行うと自動的にパーマリンクを表示してくれる。以前であれば 「test」だったものが「test.html」に標準で置き換わる。 ちなみに編集ボタンをクリックすると任意の名前をつけることができるが、パーマリンク設定を行わずに test.html と指定しても test-html と書き換えられてしまう。これは記事の名前を設定する作業であり、拡張子を設定する作業はできないからだ。 ここまでの作業で「投稿」に関しては .html でアクセスが出来るようになったが、「ページ」は.html でアクセス出来ない。わざわざ .html をつける行為を行う場合、多くは企業サイトなど「ページ」を作る場合ではないだろうか。 この問題を解決してくれるプラグインがある。「Improved Page Permalinks」をインストールすれば良い。特に設定は無いようで、インストール（して有効化する）だけでページが .html でアクセスできた。 ※.html 以外の拡張子も指定可能 ※SEO に効果はなくなったと主張する文献もあった ※運用後にパーマリンクを変更すると外部から貼られたリンクが無効になることがあるので、可能なかぎり初期に一度だけ実行することが望ましい 実際のHTML [...]]]> http://pc.casey.jp/archives/153893869/feed 0 http://pc.casey.jp/archives/153891467 http://pc.casey.jp/archives/153891467#comments Tue, 16 Nov 2010 10:34:31 +0000 admin http://pc.casey.jp/?p=153891467 ODP – Open Directory Project に登録する。 登録カテゴリを探す このページを見ているなら多くの場合、日本語を理解するだろう。Open Directory – World: Japanese以下は日本語のカテゴリになっている。このへんから探すとよいだろう。 適切なカテゴリに到達すると「URLを推薦」というリンクが表示される。表示されないなら表示されるカテゴリを探し直す。 登録申請する 注意事項が表示される。 申請するURLを入力する。 サイトのタイトルを入力する。 サイトの説明を入力する。 電子メールアドレスを入力する。この電子メールへ数週間ご連絡があるという。 同意したら送信する。 送信が受理された画面。 この記事を読んだ人は、こんな記事にも興味をもっていますCakePHP SimpleTest]]> http://pc.casey.jp/archives/153891467/feed 0 http://pc.casey.jp/archives/153891203 http://pc.casey.jp/archives/153891203#comments Sat, 06 Nov 2010 10:49:43 +0000 admin http://pc.casey.jp/?p=153891203 CSSで画像に枠線を表示する。HTMLのimgタグでborderを指定しても可能だが、CSSで対応することでOn/Offが自在にできる。WordPressのようなCMSを使わなかったとしても、HTMLで全部するかHTML+CSSで作成するかは利便性に大きな違いがある。また、SEOとしても後者のほうがよろしいらしい。 適用前の状態 上記の図の上段は純粋に画像を掲載した場合のimgタグ、下段は画像がありクリックすることができるようになっているのでaとimgタグ。今回はWordPressのあるテーマをWordPressから書き換えながら検証してみた。WordPressのテーマには画像に枠がついていないものがあるが、付いていたほうが分かりやすいと筆者は思う。 適用後の状態 上記の図はCSSに追記した例。どちらも正しく表示されている。 CSSサンプルコード /* img */ .post-content a:link img{ border :1px solid #333333; padding :3px; } .post-content p img{ border :1px solid #333333; padding :3px; } # 画像: No known copyright restrictions この記事を読んだ人は、こんな記事にも興味をもっていますWordPress で綺麗にAAを表示する[WordPress] 記事内の最初の画像を表示するWordPress ページ分割機能[WordPress] Google Analytics コードを簡単に挿入するプラグイン]]> http://pc.casey.jp/archives/153891203/feed 0 http://pc.casey.jp/archives/153890784 http://pc.casey.jp/archives/153890784#comments Fri, 29 Oct 2010 01:32:26 +0000 admin http://pc.casey.jp/?p=153890784 Google の AdSense で広告を表示させるとおおよそその記載内容にあった広告が表示される。当然それは記事の内容を解析した上で関連性の高い広告を表示するもので、それがGoogle AdSenseの強みとも言える。逆に解釈すれば、十分な文章量がない場合、その記事に何が書かれているのか判断が狂うことがある。セッションターゲットを使うと、これを矯正することができる。 通常は十分な文章量のある様々な人に必要とされる良質な記事を書くことが推奨されているが、例えばWordPressならテーマ「p2」のようにTwitter風の使い方もできる。文章量が少ないかわりに、更新頻度が高く、話題も幅広くなる可能性がある。そういった場合でもおそらくサイト内がどのような内容を主張しているのかを解析して関連性の高い広告を表示してくれるだろう。もし、広告がうまく表示されない場合には次の方法で本文を的確に伝えることができる。 ここが本文ですよと強調したい <!– google_ad_section_start –> ～ここが本文で、これに関連する広告を表示して欲しい～ <!– google_ad_section_end –> ここは本文ではないですよと強調したい <!– google_ad_section_start(weight=ignore) –> ここはウィジットや広告、アーカイブやカテゴリだから無視してね 閉じタグ 下記で掲載されている説明用の図でも <!– google_ad_section_start(weight=ignore) –> で開始し <!– google_ad_section_end –> で閉じているようですので、これで宜しいのではないでしょうか。 http://adsense-ja.blogspot.com/2009/08/adsense.html （「<!– google_ad_section_start(weight=ignore) –> の閉じタグについて – AdSense 公式ヘルプフォーラム」より引用） 注意事項 セクション ターゲット タグ内部に十分な量のコンテンツを含める必要があります。コンテンツの量が不十分な場合、関連性の低い広告や公共サービス広告が表示される可能性があります。さらに、この機能はお客様のサイトの関連コンテンツの重要セクションを強調する場合のみ使用できます。お客様のページのコンテンツに関連しない広告を結果として表示するように広告のターゲット設定を人為的に操作することは、プログラム ポリシーに違反します。 （「セクション ターゲットの概要とその設定方法 – AdSense ヘルプ」より引用） ※ページ内のセクションをいくつでも指定できるが、反映されるまで最大 2 週間掛かる。 参考文献 セクション ターゲットの概要とその設定方法 – AdSense [...]]]> http://pc.casey.jp/archives/153890784/feed 0