eラーニングをすべての人に！blog.eラーニング.co.jp

Webサイトを創業以来、ひたすら作り続けてきましたが、今回は、デザインをリニューアルしました。今回のリニューアルは、『うぇぶ屋』（http://webyasan.com/）さんに依頼してデザインをしていただきました。これまで、社内スタッフだけでデザインも行ってきましたが、専門家は、やはり専門家。大変短時間ですばらしいデザインと、全ドメインのサイトのデザイン統一、BLOGデータの再活用などを行っていただきました。ありがとうございました。

株式会社キバンインターナショナル
http://elearning.co.jp/

PPT2Flash Professional
http://ppt2flash.jp

QuizCreator
http://quizcreator.jp

DemoCreator
http://democreator.jp

WebVideo Author
http://webvideoauthor.jp

PPT2Mobile
http://ppt2mobile.jp/

LectureMAKER
http://lecturemaker.jp/

eラーニングシステム SmartBrain
http://smartbrain.info/

キバンインターナショナルでは、Wordpressの高速化させるために、wp-cacheというプラグインを使っています。このプラグインは、一度生成したHTMLをファイルシステムにキャッシュすることで、2件目以降のアクセスを圧倒的に高速化できるのですが、そのままでは、iPhone用のプラグイン(WPtouch iPhone Theme)と共存できません。

iPhone用のプラグインをインストールすると、PCで閲覧した場合と、iPhoneから閲覧した場合で異なるHTMLが出力されるようになります。しかし、wp-cacheは、iPhone用のプラグインと組み合わせて使うことが想定されていないため、最初に出力したHTMLを記憶してしまいます。そのため、最初にiPhoneでアクセスしてしまうと、パソコンで見てもiPhone用のデザインで、最初にパソコンで見るとiPhone用のデザインで表示されてしまいます。

この問題を解決するために、iPhoneから閲覧した場合はキャッシュを無効化するように、wp-cacheを書き換えました。

wp-cache/wpcache-phase1.php　13行目付近を以下のように変更しました
変更前

if (!$cache_enabled || $_SERVER[“REQUEST_METHOD”] == ‘POST’)
return;

変更後

if (!$cache_enabled || $_SERVER[“REQUEST_METHOD”] == ‘POST’ || strpos($_SERVER[‘HTTP_USER_AGENT’],’iPhone’) !== false)
return;

ifの条件部分に、エージェント判定を追加しました。ユーザエージェントにiPhoneが含まれている場合は、キャッシュのプラグインの処理を行いません。iPhoneでアクセスした時のレスポンスは若干低下しますが、パソコンと比べてネットワーク接続もハードも非力なので、問題なく運用できています。

このブログはWordpressで運営していますが、本日、Wordpress2.9にアップデートしました。数多くの機能が追加されたのですが、その中でも利用頻度の高そうな2つの機能を紹介します。

ゴミ箱機能
ぺージと投稿に、ゴミ箱機能がつきました。削除してしまうと記事を復活できませんが、ゴミ箱なら間違って捨ててしまっても大丈夫。

ゴミ箱

画像エディタ
回転、反転、トリミング、縮小など基本的な操作をWordpress上で行えます。

画像エディタ

これ以外にも多数の改善点があるので、ぜひ2.9にアップデートしてみてくださいWordpressを使われている方はぜひアップデートしてみてください。

※アップデート時には、念のため、バックアップをとりましょう。古い環境（MySQL4系）だと、Wordpressが動作しないとの情報もありますのでご注意ください。

キバンインターナショナルでは、数多くのサイトをWordpressで構築していますが、記事の数や、プラグインの数が増えてくるにつれ、徐々にレスポンスの悪さが目立ってきました。Webアプリケーションを開発している企業として、自社のWebのレスポンスが悪いなどということは許されるはずがありません。そこで、Wordpressに、表示を高速化するためのプラグインを導入しました。

導入したプラグイン
WP-Cache

詳細なベンチマークをとったわけではありませんが、トップページのHTMLの受信に掛かる時間が、導入前:１～２秒程度から、導入後:300ms程度に短縮しており、体感速度もかなり向上しました。

なお、弊社が開発しております、オンライン学習管理システム: SmartBrainは、HTML生成に掛かる時間が10ms程度になるよう最適化をしております。こちらから体験環境を設置できるのでどうぞお試しください。20アカウントまでであれば、無料でご利用いただけます。

Webサイトでの情報提供の重要性を考え、Webに積極的に情報を開示してまいりましたが、印刷時に、サイト右側のバナーが表示されたり、うまく印刷されないので、印刷専用ページを用意して欲しいとのご要望をいただきました。

そこで、株式会社キバンインターナショナルで運営している全サイトに、印刷専用のボタンを設けましたので、お知らせいたします。印刷は、文末のプリンターボタンを押すことで、印刷専用の画面が表示されます。印刷専用画面より、印刷をしてご利用いただければ幸いです。

▲Webサイトの全ページに印刷専用ボタンが追加されました。

———
株式会社キバンインターナショナルで運営している全サイト一覧

本記事は、Wordpressのテンプレートで、ヘッダー部分に「ぺージ」のドロップダウンリストが表示されている場合に、ドロップダウンメニューの階層を制御する方法についてです。

WordPressのヘッダ部分のドロップダウンメニューの階層設定変更方法

header.php、templates/header.php、もしくはこれに類するファイル、もしくは全く関係ない名前のファイルに、

wp_list_pages(‘title_li=0&sort_column=menu_order,post_title&depth=4’);

のような記述があると思います。

これのdepthが、階層の深さを指定しているので、より深い階層まで表示したければ大きな値を、より浅い階層までで表示をとめたい場合は小さな値を指定してください。depth指定がなければ、デフォルト値の0が指定され、無制限にページが表示されます。

なお、すべての階層を表示させると、ユーザビリティーは向上しますが、レスポンスの悪いサイトになる可能性があるのでご注意ください。特に1000ページ以上あるようなサイトでは、必ず深さ制限を設定しましょう。

参考: http://wpdocs.sourceforge.jp/テンプレートタグ/wp list pages

Webサイトのユーザビリティーについての注意点として 「無闇に新規ウィンドウでページを開かない」 ということがありますが、Yahooにカテゴリ登録してもらうためには 「外部ドメインへのリンク」 は 「新規ウィンドウで開く」 必要があります。このYahooの基準は、気づかないうちに異なるドメインのサイトに誘導されることでのセキュリティー上の懸念から設定されていると考えられるのですが、サイト内の大量のリンクにすべてtarget=_blankを設定するのは手間がかかります。

そこで、「JQueryで外部へのリンクにtarget=_blankを指定」を作成したのですが、このままではWordpressに組み込むのが大変です。そこで、Wordpressのプラグインとしてまとめました。古い記事に掲載しているソースコードも動作しますが、はてなブックマークなどで指摘していただいた改善点などを反映しておりますので、以下のソースコードをご利用ください。

▼通常のWebサイトに組み込み用のコード

<script src="http://www.google.com/jsapi></script>
<script>
if(typeof jQuery === "undefined")google.load("jquery", "1.3.2");
</script>
<script language="JavaScript>
jQuery (document).ready( function () {
jQuery ("a[href^=http]").not("[href*="+location.hostname+"]").attr("target","_blank");
})
</script>

※4行目まではJQueryのライブラリの読み込みなので、既にJQueryを使っている場合は5行目からお使いください。

▼WordPressのプラグインのコード（下記ダウンロード版のプラグインをご利用ください。）

<?php
/*
Plugin Name: external_link_rewriter
Plugin URI: http://blog.elearning.co.jp/
Description: Modify target attributes of A-tags that link to external addresses
Author: Yoichiro Nishimura
Version: 2
Author URI: http://elearning.co.jp/
*/

function external_link_rewriter() {
wp_enqueue_script(‘jquery’);
echo <<<EOT
<script language=”JavaScript”>
jQuery (document).ready( function () {
jQuery (‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>
EOT;
}
add_action(‘wp_head’, ‘external_link_rewriter’);
?>

▼WordPress組み込み用のプラグイン
external_link_rewriter.zip

WordPress2.7のwp_list_pagesには不具合があるらしく、excludeやexclude_treeを指定しても無視されてしまいます。Wordpressのバージョンを上げれば解決する問題なのですが、既にソースコードレベルでのカスタマイズが入ってしまっている場合、簡単にはバージョンアップできません。そこで、苦肉の策として、全ページから不要なページを取り除き、それをincludeに指定することで、excludeを実現してみました。

$exclude = array(‘2’);
$pages = get_pages();
$idArray = array();
foreach($pages as $page){
if(array_search($page->ID, $exclude) === false){
$idArray[] = $page->ID;
}
}
wp_list_pages(‘include=’.implode(‘,’,$idArray));

Blogの詳細ページを見ると、一番下に　このブログで関連すると思われる他の投稿　と表示され、関連されると思われるこのブログ内の物が出るようになりました。
今回使用した物を公開しますので設定の参考になれば幸いです。

今回必要な物

WordPress Plugin：WordPress Related Post for Japanese
ダウンロードは以下のURLより
http://wppluginsj.sourceforge.jp/wp-jrelated/

Yahoo! JAPANのアプリケーションID

取得は以下のURLより　（Yahoo! JAPAN IDが必要です。）
http://developer.yahoo.co.jp/

1.プラグインをインストールする。
WordPress Related Post for Japanese をダウンロード後、通常通りプラグインディレクトリに設置し、有効にするだけです。

2.Yahoo!JAPANでアプリケーションIDを取得する。
http://developer.yahoo.co.jp/
上記URLにアクセスすると、下の画像のようなページが表示されるので、赤枠で囲った箇所をクリックします。

Yahoo!デベロッパーネットワークのTOPページ

クリックすると、以下の画像のようなページが表示されるので、内容を記載して下さい。
※一度登録すると変更がきかないようなので、誤字脱字等に注意しましょう。

アプリケーションID登録画面

問題なければ、画面下部の確認をクリックし、先に進んで下さい。
問題なく登録が出来れば、以下の画像の通りアプリケーションIDが発行されます。

アプリケーションID発行画面

このアプリケーションIDを使いますので、コピーしておいて下さい。

3.Pluginの設定をする
WordPress の設定から JRelated をクリックして下さい。
以下の画像のようなページが表示されますので、コピーしたアプリケーションIDを
Yahoo!JAPAN WebサービスアプリケーションID の欄に貼り、Save Changes をクリックしてください。

Plugin 設定画面

4.待つ
関連記事が表示されるまで時間がかかるようなので、しばらくしてから確認してください。

以上の作業で、関連記事が出るようになります。時間がある方は試してみて下さい。

JQueryで外部へのリンクにtarget=_blankを指定という記事を昨夜投稿したのですが、Wordpressのプラグインに加工して欲しいとのお問い合わせを多数いただきましたので、さっそく作成致しました。はてなブックマークで「location.hostnameを使ったほうが簡潔に記述できる」と、ご指摘いただいた点を反映しております。ご指摘いただきありがとうございました。HTML自体を書き換えずにDOM上での変更だけでYahooの申請が通るかどうかという疑問もありますが、一旦このプラグインを組み込みYahooのカテゴリ登録に通るか試してみようと思います。

プラグイン: external_link_rewriter.zip

テストリンク(ドメイン外): http://www.google.co.jp
テストリンク(ドメイン内): http://blog.elearning.co.jp

ソースコード

<?php
/*
Plugin Name: external_link_rewriter
Plugin URI: http://blog.elearning.co.jp/
Description: Modify target attributes of A-tags that link to external addresses
Author: Yoichiro Nishimura
Version: 1
Author URI: http://elearning.co.jp/
*/

function external_link_rewriter() {
echo <<<EOT
<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
$(‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>
EOT;
}
add_action(‘wp_head’, ‘external_link_rewriter’);
?>

WordPress以外に設置される場合は、以下のソースコードをとの間に挿入すると動作します。

<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
$(‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>