WordPressプラグイン追加とW3Cチェックへの影響

posted by on 2010.04.27, under blog, CSS, Wordpress, WPプラグイン, 技術TIPS, 障害対応  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/27

当サイトは実験的な意味合いも兼ねているため、例えばWordpressのプラグインなんかも後先考えずにとりあえず入れてみたりするが、それが原因で気がつかないところで内部エラーが発生している、という事態になる可能性が大きい。

サイト公開時には検査OKとなっていたW3C・CSSのチェックにおいて、3件のエラー状態となる。

 

W3C・CSSチェックのエラー画面

 

エラーが発生したのは、最近追加したプラグイン「syntaxhighlighter」に関係するCSS部分だった。

■ Error.1

次のプロパティが正しくありません
: min-height auto は min-height で利用できる値ではありません

→「height auto」はアリでも「min-height auto」は最小の高さなので、autoは誤り? → 削除

■ Error.2

プロパティ overflow-y は CSS レベル 2.1 に存在しませんが、[css3] に存在します

→ CSS2.1においては「overflow」はOKだが「overflow-y」はNGとのこと。→ 削除

■ Error.3

文法解析エラーが発生しました [,]

→ 余分なところに「,」カンマが記述されている。これは単なるコーディングミスなんだろう。→ 削除

 

今回のような不作為は、お客さまのサイトであれば許されない。

製造完了→納品後の変更履歴について、特に注意を払うことが必要であること。

サードパーティーモジュールを使用する場合でも、当然ながらバグは存在しうる事を意識しておくこと。

今後の戒めとなるため、実験サイトとしては良い事例のひとつになった。

WordPress プラグイン WP-DBManager を使ってみる。

posted by on 2010.04.25, under blog, MySQL, Wordpress, WPプラグイン, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/25

WordPressを使用し始めて数ヶ月。ようやく見えてきたかな、という感じです。

プラグインの豊富さでは他のCMSより抜きんでている感じで、これから益々楽しみですが、
その膨大なプラグインのライブラリの中からどうチョイスするか?が問題になります。

また英語ベースのものが大半を占め、使いこなすまでには苦労もありますが、
そのキーワードを紐解く作業もまた楽しいモノだと思い始めたこのごろ。

一度使用したプラグインは、今後の情報として書き留めていこうと思います。

今回は・・・

WordPressのDBをダッシュボード上から管理出来るプラグイン「WP-DBManager」を追加。

バージョン:2.5(2010.04現在の最新バージョン)

プラグインのサイト

まず、インストール直後にプラグイン管理画面にて以下のようなWarnningが赤表示。

Your backup folder MIGHT be visible to the public

「To correct this issue, move the .htaccess file from  (パスA) to (パスB) 

要は、パスAに置いてある.htaccessファイルをパスBへコピーせよとのこと。
ただしパスA上のファイル名は「htaccess.txt」となっているので、「.htaccess」に変更してコピーして無事完了。

phpMyadminが無くても手軽にデータ削除、最適化などが出来るので、そのへんは便利。

 

日本語版もあるのを後で気がつき、「wp-dbmanager-ja.mo」「wp-dbmanager-ja.po」をWP-DBManagerプラグインのフォルダ内にコピーするという横着をしたものの、一部日本語化できず。

はじめから日本語版をインストールしたほうがいいという事でしょう。

参考にさせていただいたサイト

 

新規サイト公開直後(2)~サイトマップ登録~

posted by on 2010.04.23, under blog, 公開準備  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/23

サイト公開してからあっという間の1ヶ月。

もう「公開直後」とはいえないかもしれませんが、覚え書きの追加です。

サイトマップ登録は、GoogleもYahoo!もbingもほぼ同じような手順。

 

■Google ウェブマスターツール

https://www.google.com/webmasters/tools/home?hl=ja

■Yahoo! サイトエクスプローラー

https://siteexplorer.search.yahoo.co.jp/

■Bing Webmaster Center

http://www.bing.com/webmaster/WebmasterManageSitesPage.aspx?FORM=JPWU

 

1.URL登録

2.所有権の確認(HTMLファイルの取得→アップロード OR 指定されたメタタグを追加)

3.サイトマップ・フィードを登録(当サイトの場合、httm://e-six.jp/sitemap.xml)

 

サイトマップ・フィード(XML)作成は、当サイトの場合Wordpressなのでプラグインを使用。

プラグイン:XML sitemap (バージョン1.6.1)

インストールすると、ルートに「sitemap.xml」が作成されるだけで、設定もなにもないシンプルなもの。

 

bingのWebmaster Centerはほとんど使用したことがなかったが、果たしてこれでMSNBot が、ばんばん回ってきてくるようになるのだろうか?そして無事インデックスしてくれるのだろうか?かなり疑問。というのも、4ヶ月前に作成した別サイトについてbing Webmaster Centerに登録しておいたのに、bing検索にインデックスされているのはまだトップページだけ!という事実があり。こちらのクローラーはそれなりに訪れているようなのに、どうして・・・。他の2エンジンに比較して圧倒的に検索件数が少ないのであまり影響はないが、今後の動向には注視したい。

Adobe CS5 station5プレオープンevent

posted by on 2010.04.21, under blog  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/21

 ADOBE Station5


Adobe Create Suite 5の日本語版が5月中旬にも発売されるが、今日22日に表参道にCS5関係のリアルスポット「Station5」がオープンするらしく。前日の今日、プレイベントが開催されていましたが、もちろんリアル参加は困難なので、USTREAMにて模様をのぞいてみることにした。


ストリーミング映像の画像はあまりよくなく、画面も引きの映像だったのでもどかしい部分もあったが、短い時間の割には解りやすい説明でよい内容だったと感じる。社長、副社長の挨拶やプレゼンがあった後、高城剛氏がゲストスピーカーとなり、自身の作品『大黒天』のデモがある。高城氏はPhotoshopをはじめとしてアドビ歴20年のヘビーユーザーだとのことで、驚いたのが嫁さん(もちろん、あの沢尻エリカ!)もアドビユーザーだとの披露も。意外?だ。旦那さんの影響だろうか。

駆け足だったがCS5の新機能についての紹介はなかなか興味深かった。
Photoshopのパペットワープ?だったっけな?ばんばんオブジェクトを切り取って動かす様子にまず驚く。
「混合ブラシツール」とかいうパレットで絵の具を混ぜるがごとくのツールや、
2D画像を3D画像へ変換するツール、
遠近グリッドツールなんかもいろいろと使えそうだった。

InDesign→FLASHへの制作の流れなんかも、コードレスで動画アニメーションを完成させる手順があまりにも簡素で驚きで。プレゼンターの話す流れとデモ操作が実にスムーズで、自分もこんな感じで操作できるのなら、どんなに・・・と錯覚を起こしそうになり。これはこの感じはCS4のときも同じ状態だったではないか?とも、心の中で思いながら見てしまいました。

 

「夢に思い描くものは全て作ることが出来る」

「革命はデスクトップから起こるんだ!」

などというスローガンに、つい乗せられそうになってしまいますが、それなりに高価
Design Standard 198,450円(UG 84,000円~)
~Master Collection 397,950円(UG 218,000円~)
なので、導入検討には目的や効率、対費用効果や汎用性などを冷静に判断する必要がありますね。

・・・

USTREAM上で、
”こんだけプレゼンに使い易いツールが増えると、クライアントの要求がますます高くなりそうな恐怖。”
というtwitteを目にしてしまい。
確かに恐怖かもしれない。(苦笑)

 

Google Maps と Mapion 日本測地系→世界測地系

posted by on 2010.04.19, under blog, Googole API, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/19

WEB上に地図を表示する代表的なツールはGoogle Mapですが、場合によっては他のAPIも使い分けることが必要だというケースがあったのので、覚え書きを記します。
地球上の位置を特定するのに用いられるのが緯度・経度。
ただしこの緯度・経度には基準とする前提条件があることを不勉強でしりませんでした。ざっくり言うと「世界測地系」と「日本の測地系」に別れていて、Google Mapは当然ながら世界標準とされる「世界測地系」を採用しているわけですが、これがMapion(マピオン)をはじめ多くの日本の地図情報WEBサービスは「日本の測地系」を採用しているとのこと。
この二つの測地系の間に存在する誤差は、Wikipediaによれば
「東京付近では、おおむね、日本測地系の数値から、北緯に12秒加え、東経に12秒減ずると、世界測地系の数値が得られる」。
とのこと。(この”東京付近では、”とか”おおむね”とかいうのがひっかかりますが。)
これを計算式でいうと、

x = 日本測地系経度 + 分/ 60 + 秒/ (60*60)
y = 日本測地系緯度 + 分/ 60 + 秒/ (60*60)
x = y – y*0.00010695 + x*0.000017464 + 0.0046017
y = x – y*0.000046038 + x*0.000083043 + 0.010040

となるらしい。

ちなみに、福岡付近のMapionデータをGoogle Mapsへ変換した結果、ほぼピタりの地点もあれば、数メートルくらいズレが見られる場合もあり、小さい施設などの場合はこの数メートルの差が明らかなズレに感じてしまう場合もあり、という結果になってしまいました。

この差の調査は引き続き行う予定です。


Google Earth API を利用して、Driving Simulatorを試す。

posted by on 2010.04.17, under blog, Googole API, HTML, JavaScript, PHP, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/17

Google Map APIを調べていたら、gmap2を通り過ぎてgmap3までいっているではないですか!

少し注意力がゆるむと情報から取り残されることに不安になります。

さらによく見てみると、Google Earth API までもがリリースされていることに気がつく。以下覚え書き。

(作動には初回はプラグインのダウンロードが必要です。)

Directions From: To:
Simulator Speed: 1x

 

(使用したJavascriptライブラリ)

(使用したGoogle APIライブラリ)

<script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=ABQIAAAAfX-HRoBvGpvoySrUwnOHcBTUkZcFtEOurKgmOCOt0dxaULL03hTqo7fhMMlwEDWOvnLnz-OAF5oVkg">
</script>

(HTML部分)

<table style="width: 100%;">
<tr>
  <td valign="top">
    <table>
      <tr>
        <td style="width: 100%" valign="top">
          <form id="directions-form" onsubmit="return false;" action="post">
            <fieldset>
              <legend>Directions</legend>
              From:
              <input type="text" id="from" value="東京都新宿区新宿御苑前" size="30"/>
              To:
              <input type="text" id="to" value="東京都渋谷区恵比寿三丁目" size="30"/>
              <input type="submit" onclick="DS_goDirections();" id="go" value="区間セット"/>
            </fieldset>
          </form>
        </td>
      </tr>
      <tr>
        <td style="width: 100%" valign="top">
          <form id="simulator-form" onsubmit="return false;" action="get">
            <fieldset>
              <legend>Simulator</legend>
              <input type="button" onclick="DS_controlSimulator('start');" value="スタート"/>
              <input type="button" onclick="DS_controlSimulator('pause');" value=" 停止 "/>
              Speed: <strong><span id="speed-indicator">1x</span></strong>
              <input type="button" onclick="DS_controlSimulator('slower');" value=" - "/>
              <input type="button" onclick="DS_controlSimulator('faster');" value=" + "/>
            </fieldset>
          </form>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
<table style="width: 100%; height: 400px;">
<tr>
  <td style="width: 67%" valign="top">
    <div id="earth" style="border: 1px solid #000; height: 400px;">
    <div id="status"></div>
  </td>
  <td style="width: 33%" valign="top">
    <div id="map" style="border: 1px solid #000; height: 400px;"></div>
  </td>
</tr>
</table>
<div id="route-details"></div>
<hr />

(注意点)

■比較的処理が重いので、メモリーリークを回避させるために、ページを離れる時の「onunload」イベント処理を「body」タグに追加してメモリの開放を行う。

<body onunload="GUnload();">

■Javascriptのライブラリ「geplugin-helpers.js」に、「p1」「p2」というありふれた変数が使われていたため、他の関数とバッティングしてしまった。

重複しないような名称に変更して使用することで回避する。

ちなみに修正前の状態でIEではエラーになって動作しないが、Firefoxでは無視して最後まで処理されるという違いあり。

プラグインAdvanced Export for WP & WPMUを試用

posted by on 2010.04.15, under blog, MySQL, Wordpress, WPプラグイン, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/15

WORDPRESSプラグイン画面


WordPressに装備されているインポート、エクスポートで大量データを取り扱う時に不都合が生じたため、試しに使ってみたプラグインが、「Advanced Export for WP & WPMU」。

制作中のサイトにて、約10,000件を越える記事をバッチ処理にてxml化し、Wordpressに取り込もうとして、問題が発生してしまった。インポートファイルが約40MBにふくれあがった結果、2,000件目あたりの処理中にタイムアウトし、取り込み不能となる。

実行したのはローカルPCサーバ上のテスト環境にて。

WordPress バージョン:2.9.2

ツール・インポートのダッシュボードには、「最大サイズ:50MB」と表示されているが、気安めだろうか?

まずphp.iniの処理時間関係のパラメタを、よくわからないままとりあえず10倍にしてみる。

 → 状況は変わらず。

次に.htaccessの記述追加を試みる。

#Change upload limits
php_value memory_limit 34M
php_value post_max_size 33M
php_value upload_max_filesize 32M
php_value max_execution_time 600
#Change upload limits end

参考記事:http://www.ideaxidea.com/archives/2009/02/wordpress_import_hacks.html

 → でも状況はかわらず。といか、php処理が瞬時に落ちる現象にびびってしまう。

 (文字コード設定ミス?ファイルの設置場所間違い?急いでいたので調査は回避)

バッチ処理でファイル出力時に、1ファイル4MB程度になるように10分割。

 → 不細工な方法だけど、とりあえずテスト環境に取り込み成功。

その後データをリモートサーバ上に移し替えるために、エクスポートしようとして、当然のようにエラーとなる。

リモートサーバ:Xserver使用

 → というわけで、年月範囲や投稿者、カテゴリー毎などの色々な指定で大きめのエクスポートファイルを出力できるという「Advanced Export for WP & WPMU」を使ってみた。

http://wordpress.org/extend/plugins/advanced-export-for-wp-wpmu/

今回は分割範囲が微妙な大きさだったので、全データ移行は遂行できなかった。でも今後1,000件(記事)単位のデータを部分的に移行するケースで使えそうだなと。

・・・・

などと時間を費やした結果、phpMyadminでバックアップ、リストアすることに落ち着く。

それでもDBのSQLは20MB程度だったため、結局テーブル単位での移行で作業を完了する。

サーバ環境設定について少しは知識がないと、こんなに作業がモタつくという教訓。

 

<今日のまとめ>

~Wordpress 10,000件(xmlファイル1,300,000レコード、40MB)のデータ移行~

1.10,000件 ==> 1,000件inport(4MB) × 10ファイル分割

2.1,000件inport × 10回 ローカルサーバWordpressにインポート

3.ローカルサーバMySQ:phpMyadminでバックアップ(SQLテーブルエクスポート)

4.リモートサーバMySQ:phpMyadminにSQLインポート(11テーブル別・計20MB)

以上

新規サイト公開直後(1)~お約束?検索エンジン登録~

posted by on 2010.04.11, under blog, 公開準備, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/11

新規に作成したサイトが一応公開出来るレベルまでのコンテンツが完成した後、
公開までの細々した準備作業を覚え書きとして記しておこうと思います。
まあ当たり前の作業であっても、その施策を行った時期によっても環境の違いがでてくることも考えられ、
作業の整理や漏れの検証も行う意味で、書き留めることはムダではないだろうという思いです。

 流石に下記手順の記述などは冗長かもしれませんが。。。 

 

 ●大手検索エンジンへのクロールリクエスト

 

 待っていてもクロールはされるでしょうし、当サイトは実験サイトみたいなものなので、少しでも早くインッデクスされることを求めているわけでもないですが・・・それでもお約束というかクローラーへのご挨拶というか、そんな感じですね。

 

Yahoo! 検索エンジン登録

Google 検索エンジン登録

Bing 検索エンジン登録

NAVER検索に登録

Baidu Japanに登録 

MARS FLAGに登録 

 ・・・・

なお 当サイトはWordpressを使っているので、

「設定」-「プライバシー」-「ブログの公開状態」

 

 の選択も忘れずに。

 

jQueryのメニューlavaLampを使ってみる。

posted by on 2010.04.02, under blog, JavaScript, jQuery, PHP, Wordpress, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/02

jQueryライブラリでお馴染みのlavaLampをヘッダー右側に設置。

マウスに付いてくる動きが気持ち良いですね。




 

使用したライブラリ:

jquery-1.3.2.min.js

jquery.easing.min.js

jquery.lavalamp.min.js 

 

参考にしたサイト:

jQueryを利用したFlashみたいなメニュー

LavaLamp for jQuery lovers!

 

注意メモ1:

サンプルソースのJavascriptをそのまま貼ると、リンク先に遷移しなかったため、

clickイベントの戻り「false」(07行目)を「true」に修正して無事OKに。

<script type="text/javascript">// <!&#91;CDATA&#91;
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout", 
speed: 700,
click: function(event, menuItem) {
return false; ← true に変更
}
});
});
// &#93;&#93;></script>

 

注意メモ2:

currentページの表示は、liタグのクラスに「current」を追加すればOK。

<ul id="p2" class="lavaLampNoImage">
	<li class="current"><a href="http://e-six.jp/">Home</a></li>
	<li class="page_item"><a href="http://e-six.jp/about/">About</a></li>
	<li class="page_item"><a href="http://e-six.jp/order/">Order</a></li>
	<li class="page_item"><a href="http://e-six.jp/inquiry/">Inquiry</a></li>
	<li class="page_item"><a href="http://e-six.jp/link/">Link</a></li>
	<li class="page_item"><a href="http://e-six.jp/category/blog/">blog</a></li>
</ul>

(追記)

WORDPRESSのテンプレート「header.php」に記述したPHPのソースも記述しておきます。

<ul class="lavaLampNoImage" id="p2">
    <li class="<?php if (!is_page() && is_home()) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/">Home</a></li>
    <li class="<?php if (is_page('about')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/about/">About</a></li>
    <li class="<?php if (is_page('order')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/order/">Order</a></li>
    <li class="<?php if (is_page('inquiry')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/inquiry/">Inquiry</a></li>
    <li class="<?php if (is_page('link')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/link/">Link</a></li>
    <li class="<?php if (is_page() || is_home()) { ?>page_item<?php } else { ?>current<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/category/blog/">blog</a></li>
</ul>

pagetop

  • seo