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

以前弊社サイトの高速化について紹介しました。今日は、はWordPressの動作が悪い時にボトルネックになっている要素を見つけ出すためのプラグインDebug BarとDebug-Bar-Extender　ならびに、　object cacheをmemcacheに読み込ませて高速化させる方法をご紹介します。

Debug BarとDebug-Bar-Extender

このプラグインを導入すると、以下のような画面でQuery数や実行時間を調べることが可能になります。

クエリー実行時間などを調査

インストール方法については、以下の記事が丁寧でわかり易かったので、参考にして頂ければ幸いです。（当方でも特に問題なくインストールに成功しました。）

Debug Bar Extender – 重いWordPressのボトルネックを調べる
http://www.seotemplate.biz/blog/wordpress-plug/7156/

object cacheをmemcacheに読み込ませて高速化

これはどういう事かというと、すごく乱暴にいうと「Wordpressはobject cacheを使っているけど、プロセスが終了すると棄ててしまうので、Memcached Object Cacheを使って保存しておこう」という事のようです。詳しくは、以下の、ハイパフォーマンスWordPressサイト入門を参照ください。

ハイパフォーマンスWordPressサイト入門
http://dogmap.jp/wckobe2011/
大変参考になるサイトです。今回の、object cache周りに関しては、スライド79から掲載されています。

このようにキャッシュを活用することで、

作業前

実行後

参考

Webサイトの高速化を実施しました。
http://blog.elearning.co.jp/archives/26076.php

Debug Bar Extender – 重いWordPressのボトルネックを調べる
http://www.seotemplate.biz/blog/wordpress-plug/7156/

ハイパフォーマンスWordPressサイト入門
http://dogmap.jp/wckobe2011/

株式会社キバンインターナショナルのWebサイト、つまり、このブログや、SmartBrain、PPT2Flashなどの製品サイトは、WordPressを利用して運用しています。ただし、多くのサイトを稼働しているためか、そもそも文量が多くなってきたため（例えば、プログのDBサイズが300MB弱、サーバ全体で700MB弱あります。）か、速度が低下しておりました。そこで、幾つかの高速化へ向けた対策を実施したことで、かなりの改善ができましたので、ご紹介致します。

改善後の数値

Page Speedを用いた計測では、メンテナンス実施前は、60点台だったサイトが、メンテナンス実施後は、90点台まで回復しました。

SmartBrain のサイトは、97点（100点満点）に

PPT2Flash のサイトは、93点（100点満点）に

メンテナンの際に利用したもの

今回の改善方針としては、キャッシュを活用する、という事です。様々なプラグインがあるようですが、今回は、Memcached　　と　Alternative PHP Cache　を利用しました。特に、memcached　は、WordPressの画面で実行状況を管理する事ができるので便利です。

Memcached の管理画面

以下に、インストールの際に役立った記事へのリンクを掲載致しますので、WordPressの速度低下に悩まれている方は、参考にして頂ければ幸いです。

参考

速度の計測　
Page Speed　　インストールの参考記事

インストールしたパッケージ関連
Memcached　
インストールに役立つ記事　wordpress-に-memcached-を使う手順

Alternative PHP Cache
インストール手順

タグを利用してYoutubeのビデオを入れる方法を説明したら、Twitterでいろいろ便利なプラグインがあることを教えてくださる方がありましたので、いろいろ調べて、Viper’s Video Quicktagsというプラグインを入れました。Youtube以外に、FlashVideo（FLV）、QuickTimeも対応していることが導入の決定打となりました。

プラグインを追加することで、ビデオが簡単に追加できるようになりました。

YoutubeのURLをコピーします。URLバーからコピーが必要です。

YoutubeのページのURLをコピーします

実際には、下記のようなタグが埋め込まれます。

このような専用タグが埋め込まれます

画面で表示すると、下記のようにビデオが表示されます。

YOUTUBEの動画を、WordPressに貼り付ける方法を書いておきます。Blogの記事にビデオが入っているだけで、ずいぶんわかりやすくなります。Youtubeのサイトにジャンプするのではなく、記事の中に、Youtubeの動画そのものを埋め込む方法を説明いたします。

テンプレートによってはURLを入れるだけで良いのですが、多くのテンプレートは「埋め込みコード」を取得する必要があります。

下記の手順の3番のように、「古い埋め込みコードを使用する」を選択することが重要です。このチャックをしておかないと、文章編集中に、Youtubeの埋め込みタグを、WordPreessのHTMLエディタが自動で消してしまうので要注意です。

Youtubeの動画埋め込み手順

Youtubeの動画埋め込み手順　Wordpress側

私たち4月中に、2製品のリリース（ベータ版）を発表することをブログで発表しましたが、新製品を発売するとなると、Webの作成が必要になります。

今現在、教材作成ツールの2製品、コンテンツ関連で3製品のWebサイトを、社内のスタッフで内製をしています。

専属のスタッフを置かず3-4名のスタッフが自分たちの時間を工面しながら、大量にWebサイトを作成できているのには、いくつかの工夫があります。

情報の発信力アップのための10の工夫

1. 私たちは、このブログもWebサイトも、すべて、WordPressで作成することに統一したため、WordPressの使い方だけマスターすれば良い。
2. デザインは共通のテンプレートを利用し、サイトごとに、新しいデザインを作成することにコストをかけない。
3. スタッフ全員でスクリーンショット作成用のソフトを統一し、統一感を出す。
4. 原稿を書くスタッフには、1人1台体制でデジタルカメラを支給する。
5. Blogに関しては、相互に修正したり、加筆をしたりしながら、相互にアドバイスしていく雰囲気を作り運営する。
6. Blogについては、一切内容について評価は行わず、アウトプットの量に対してのみ評価する。
7. 文章が苦手なスタッフには、キーワードや内容のアイディアなどの提供、アドバイスをし特定のスタッフだけではなく、理想をいえば、全員が情報発信できる状態を作る。
8. Blogで書いた文章、写真、Youtubeの動画を整理して、製品ページの新着情報やニュース、Faq、マニュアルの充実に活かす。
9. 長い文章ではなく、短い文章+写真で、記事を書く習慣を作る。
10. Facebookのコメント機能を組み込み、社内外の関係の深い人同士で、コメントを書き、自分の原稿が、ほかの方の目にどのような形で伝わっているのか確認の場とするようにする。

便利な管理ツールで、手作業で、HTMLを作るような手間はないのですが、どうしても文章を書く作業は、なくなりません。ITの力を借りて省力化できるところは手間を省き、情報発信の量、質をアップするための工夫をされてはいかがでしょうか。

5分の作業で、自社のWebサイトを60ヶ国語に自動で翻訳する方法を説明します。簡単な作業で無料で60言語のWebサイトに大変身です。

Googleの翻訳機能が自社のWebサイトで無料で利用できます。自動翻訳の機能追加方法、自動翻訳機能を埋め込んだ画面の例、自動翻訳の機能を活用するコツの3点について説明します。

1.翻訳の追加方法

Webサイトで、日本語、英語、中国語で情報発信することが、今後ますます重要になり、海外との取引を増やしていきたい企業にとっては必須の活動になります。

Google翻訳（http://translate.google.com/translate_tools?hl=ja）を使うと、約60言語（2011/04/13現在59言語）に、自動で無料翻訳をしてくれます。その方法を解説します。

Google翻訳に行き、貼りつけ用のタグをコピーします

わざわざ、サイトに行かなくても良いように、下記にコードを貼りつけておきます。コピーしてご利用ください。

<div id=”google_translate_element”></div><script>function googleTranslateElementInit() {  new google.translate.TranslateElement({    pageLanguage: ‘ja’  }, ‘google_translate_element’);}</script><script src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>

下記に、WordPressの場合の方法を説明します。上記のタグを、翻訳機能を追加したい所に、貼り付けるだけで、自動翻訳機能が利用可能です。みなさんが作成されているWebに、上記のタグを貼り付けるだけです。

WordPressのウィジットの「テキスト」にコードを貼り付けます

キバンインターナショナルのブログに翻訳ボタンがつきました。プルダウンで言語を選択すれば翻訳が完了します。

2.自動翻訳機能の画面を確認してみましょう

キバンインターナショナルのブログに翻訳ボタンがつきました。プルダウンで言語を選択すれば翻訳が完了します。

ためにしに、中国語（簡体字）を選択してみます。

▲中国語（簡体字）に自動変換されました

英語にも、もちろん翻訳が完了。こうして簡単に多言語化ができました。

▲Google翻訳で自動的に英語に翻訳が完了

もちろんプロやネイティブの人に翻訳してもらうにくらべれば、機械翻訳ですので、完璧というわけには行きませんが、意味をとってもらうことは可能です。

3.google翻訳の上手な活用方法

1. 写真や画像は翻訳されない。写真や画像のALTタグは翻訳される。写真には忘れずキャプションを入れましょう。
2. ナビゲージションやタイトルは、デザインにこだわり画像にしたい気持ちもわかりますが、テキスト（スタイルシート）を活用して、テキストにしましょう。
3. 短く簡潔な文章で、機械が翻訳しやすい文章の作成をしましょう。短く文章を区切る工夫で、機械翻訳が正しく行われたり、意味がわかる訳文が作られる可能性が高くなります。

記事を作るだけではなく、整理も重要

月間150以上もブログを書くようになり、記事のカテゴリーを一度整理しないと収集が付かない状態になっていましたので、カテゴリーを階層化しました。検索エンジンから、このブログを見に来て下さる方が多いので、興味をもった分野の記事が、一度に探せるようにカテゴリーの整理は重要だと考えました。アクセス数も現在、6万ユーザ強、どんどん利用者が増えていますので、自分たちの書きたいことをメモとして残すのではなく、きちんと整理して、情報として価値がでるように、注意しながら、増やしていきたいと思います。

▲記事のカテゴリーを整理、eラーニングのカテゴリーがやはり多い

キーワードの強度

また、どのようなキーワード（タグ）を沢山つけているかがわかるように、タグについても、画面の右側に表示をつけました。よく利用されるキーワードほど、大きく表示されています。

▲eラーニング・パンダスタジオ・USTREAMがキーワードとして多いことが分かります

キバンインターナショナルでは、日々多くの記事をブログで公開しています。記事を書く上で私が気をつけていることを紹介します。

1. それっぽい画像を入れる

画像を入れると信憑性が約30％あがります。必ずいれましょう。

2. 段落を使う

だらだらと長い文章を書くと読みづらい記事になります。内容ごとに段落を分けましょう。

3. 曖昧な表現をしない

～かもしれない。～といえなくもない。などという曖昧な表現は極力避けましょう。読みにくくなるだけです。

守らないとこうなる

キバンインターナショナルでは、日々多くの記事をブログで公開しています。記事を書く上で私が気をつけていることを紹介します。それは、それっぽい画像を入れるということです。画像を入れると信憑性が約30％あがるらしいです。いれたほうがいいとおもいます。記事に関連する写真があるなら入れるといいですし、なければ素材集の画像を使うとよいでしょう。また、段落を使うことも重要です。だらだらと長い文章を書くと読みづらい記事になります。内容ごとに段落を分けましょう。曖昧な表現をしない。～かもしれない。～といえなくもない。などという曖昧な表現は極力避けましょう。読みにくくなるだけです。

まとめ

内容が重要なのはいうまでもないが、「見せ方」を一工夫してみてはいかがでしょうか？

日本国内でもFacebookへの注目が集まりはじめてきましたが、企業のWeb担当さん。Facebook対策できてますか？Likeボタンつけただけで満足しちゃってませんか？

Facebookは日本を侵略中

先日、新コメントプラグインなるものが発表され、Facebook界では話題騒然です。サイトデザインに大きく影響を与えるため導入の是非は検討の余地がありますが、Facebookそのものや、外部サイトへのFacebookコメントの埋め込み機能などは、決して無視できることにできない段階にまで来ていると思います。キバンインターナショナルでも、Facebookを使った企業PRや広報活動に力をいれており、パンダスタジオのFacebookページは1000いいねを集めるに至っています。

Facebookのコメント機能使ってみよう

コーポレートサイトで、「いいね」を押してもらう。いいことだと思います。でも、より具体的なフィードバック欲しくありませんか？それなら、Facebookの外部コメント機能を導入するのが一番です。

WordPressをお使いの方

以下のプラグインを導入するだけでOKです。
wp-facebook-comment.zip

WordPress以外の方

以下のタグを貼り付けてください。記事のURLは、ご利用されているCMSのルールに従って記述してください。

まとめ

キバンインターナショナルは、Facebookにも強い会社です！！

WordPressって、ユーザ毎にスタイルシート変更できるって知ってました？

記事毎にAuthorが付いている…はず。

記事のDivにAuthorを含むクラスが指定されていればスタイルシートで一発なんです。でも残念なことに、Authorが指定されていないテーマも多くあります。テーマファイルを改良することでも対応できるのですが、これではテーマをアップデートした際に巻き戻る可能性があります。

プラグインで対応

そこで、記事をDivタグで囲うプラグインを作成しました。

プラグインを導入すると、著者ID、カテゴリID、タグIDがDivタグのクラスとして設定されます。

追加分のCSSをプラグイン内で設定しておけば、テーマを切り替えても安心です。