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

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

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

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

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

最近PCと回線速度の向上で、インターネット経由でビデオ配信やビデオ会議が当たりまえ。スタッフとは、skypeを使って日々の業務に必要な情報の共有をしているけれど、取引先では、大企業ほど、skypeはセキュリティの問題で、、、というよくある理由で利用できないところが多い。

また、実家で、60歳を超える父・母はPCで、skypeを利用するのは難しい。

スマートフォンでskypeを使えるようになることで、解決されるのかな、、、なんて思っていましたが、こんなすてきな解決策があったんですね。

PCなしでSkypeテレビ電話のできる認定製品、ASUSビデオフォンタッチが日本でも発売開始されました。Skypeだからもちろんテレビ電話は無料です。

充電もでき、無線・有線どちらでもインターネットがつなげるので、家の中で持ち歩いて利用できますし、Poket　Wifiなどがあれば、旅先、イベント会場からでも利用できます。そのまま話してもきれいに音を拾う内蔵マイクと30万画素のカメラ付きだそうです。

プライバシーの気になる方は外付けヘッドセット・マイク接続も可 能。カラーもインテリアに合わせて選べる「シルバーグレー」と「パールホワイト」の2色で登場。30,800円でアマゾンから購入できるそうです。

Skypeクレジットを購入または月額プランを追加すれば、普通の電話へも通話発信できます。

機能一覧

• Skype同士のテレビ電話と音声通話
• Skype会議通話への参加
• ログイン状態表示で誰がコンタクト可能か確認可能
• 電話への格安通話（Skypeクレジットか月額プラン購入が必要）
• オンライン番号の利用（オンライン番号の購入が必要。普通の電話からの着信が可能）
• ボイスメールの受信（留守電機能）
• Skypeアカウントの詳細表示（クレジット残高など）

コンピュータの苦手なご両親や、遠く離れたおじいちゃんおばあちゃんへ、クリスマスプレゼントにいかがでしょう？年末年始に実家へ帰省される方、この機会にセットアップもぜひ。

▼千代田区秋葉原のUstreamレンタルスタジオ【PANDA STUDIO パンダスタジオ】
スタジオの詳細・活動記録はfacebookファンページに公開していますので、ぜひご覧下さい。
http://facebook.com/pandastudio.tv

本記事は、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

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>

前後投稿へのナビゲーション

単一投稿ページ（1ページに1つの投稿だけ表示されているページ）の、前後ページへのナビゲーションをわかりやすくしてみました。もともと、投稿の末尾に表示されていたんですが、スクロールしないと見えないうえ、場所も分かりにくかったので、記事のトップに移動しました。書き換えたテンプレートはsingle.phpです。

WordPressは、わかりやすいソースコードで記述されていて、プログラマでなくてもある程度のカスタマイズを実現できます。今回は、非プログラマが犯しがちな2つの落とし穴について解説します。

1. 文字コードはUTF-8を使うこと。

WordPressのソースコードはUTF-8です。Shift-JISでも、euc-jpでもありません。UTF-8です。エンコードを間違えると、文字化けするだけでなく、重大なエラーが発生し、最悪の場合はWordpressの管理画面が利用できなくなってしまう可能性さえあります。ソースコードは必ずUTF-8で保存してください。

utf-8以外で保存すると文字化け発生！

2. HTMLコメントでコメントアウトしない。

テンプレートから要素を削りたいことってありますよね。たとえば、投稿日時や、投稿者情報、コメント欄など。でも、要素を削るために、HTMLのコメントアウトを使うのは危険です。

<!–<?php the_title();?>–>

上記のソースコード、タイトルを表示させないことを意図していますが、どこが危険なのか分かりますか？HTMLのソースコードを見られたらタイトルがばれるというのも問題かもしれませんが、本当の問題は、the_title()の中でHTMLのコメントアウトが出力され得るということです。HTMLコメントは、入れ子構造に対応していません。そのため、the_title()がHTMLコメントを出力すると、以下のようになり、表示が崩れてしまいます。

<!– <!– title –> タイトル –>

こうなってしまうことを防ぐためには、PHPのコメントアウト、もしくは、if文を使った実行制御で対応しましょう。

単行PHPであれば//で十分。

<?php // the_title(); ?>

複数行のコメントアウトはif文を使うと便利。

<?php if(0){?>
この部分はHTMLに出力されません。
<?php } ?>

もちろん、PHPの複数行コメントアウトである/* */も使えますが、/**/も入れ子構造に対応していません。なので、if(0){}で囲ってしまうのが一番確実です。

この記事は、Wordpressのテンプレート編集時の注意事項というタイトルで書きましたが、これらの注意点は、PHPなどのWebアプリケーションのソースコード（特にview部分）を書き換える場合には汎用的に使える知識です。

WordPressにパンくずリストを表示するプラグイン を使って、SmartBrainの製品サイトにパンくずリストをつけてみた。ページ階層が深くなると、パンくずリストは必須ですね。

最近、9名のスタッフで、月に250ページ以上のWeb、blogを作って公開しています。過去のものを移植するのも含め、年内には、2,000ページに到達します。少ないスタッフで多くのページを量産できているのは、WordPressという便利なツールを利用しているのもありますが、大きな目標、理由があっての活動です。

突然ですが、私は、勉強のコツと、仕事のコツは似ていると考えています。勉強法と仕事法は同一と言っても良いぐらいです。私の勉強方法は、勉強方法を決めたら、方法論は大きく変えず、可能な限り多くの時間を投入することに集中する方法です。一見、要領がわるいようですが、とにかく時間を多く投入することです。努力した時間は、絶対裏切らないという信念を持っています。

たとえば英語を勉強する方法を書いた書籍やBlogはたくさんあります。その中から自分にあった方法論を決めます。また、成功談をまとめた文章を読み、自分が将来、どのような姿になりたいかイメージを明瞭にして、学習のモチベーションを上げます。方法論が決まり、モチベーションが上がったら、ひたすら「量」の追求をします。方法を決めたら、後は振り返らず、ひたすら時間を増やすことに専念します。時間と量を増やすことが最も肝要です。学習方法をコロコロ変えるより、毎日3時間、1年間で1,000時間かならず時間を当てることが重要です。究極の効率化、方法論を追求することも重要ですが、毎日コツコツ、学習を積み重ねることが、何よりも、もっとも効率の良い方法ではないかと思います。

学習を始めた直後（新しい仕事を始めた直後）も、様々な障害があり、なかなか勉強が進まなかったり、時間がとれなくなったりします。とにかく設定した目標「量」、きめた「時間」を達成することに集中します。質の向上は、量の増加があって初めて可能だと考えています。最初に、ライバル各社やお手本になる製品を徹底的に調べますが、そこにいくら時間をかけても、自社の製品は良くなりません。勉強法をいくら調べて改善したとしても、学習そのものの量が増えないことには、意味がありません。

私たちは、新しいeラーニング製品を作ったり、サービスを提供して、最終的なゴールとしては、すべての人にeラーニングを提供したい。人々が学びに熱中し、争いごとを忘れるほど、熱中させたいと考えています。学びは人間の本能の1つです。最高の学びの機会があれば、人類は、学びに熱中し、戦争に明け暮れることが減少すると信じて活動をしています。この目標達成のために、方法論を決定し、今は時間を当てること、量を増やすことに集中しています。

Blogは3ヶ月で、約200件の投稿をスタッフで力を合わせて書きました。スタートは、50件／月を目標としましたが、先月から75件／月まで、目標量が増加しています。アウトプットの量を増やすことで、自然にインプットの量を増やす必要があります。また、eラーニングについて真剣に考える時間が増えます。1年後には、1000件の記事が達成します。最高の記事を書くことよりも、毎日、コツコツ続けて、量を積み重ねることを1つの目標にしています。

現在、内容もバラバラ、質も決して最終的な目標には到達できていません。私たちがゴールとする「すべての人にeラーニングを！」という思いを伝えたり、eラーニングのすばらしさ、学ぶことのおもしろさを、このblogで伝えていければとおもっています。

blogだけではなく、webも大量に作成しています。PPT2Flash Professional、QuizCreator、DemoCreator、WebVideoAuthor、PPT2Mobile、LectureMAKERなどのマニュアルを、オンラインマニュアルとして、急ピッチで作業をしています。FAQを、オンラインで公開する予定でしますので、上記製品だけでも、ページ数が、900ページあります。2009年11月中に全てを完成させるために、鋭意作業をしています。

創業から、まだ3ヶ月、みななで力を合わせ、WordPressという至高のツールを利用し、完了しただけでも、800ページ程度のwebを公開してきました。質や社会への貢献度を考えると、まだまだ改善、改善が続きます。改善は続きますが、毎日たゆまず、歩みを続け、決めた方法で量をこなすことで見えてくるもの、習得できるものがあると思っています。量が質を生み出すを信じています。

Webページに至らぬ事、改善すべきことが多数ありますが、お気づきの点、ありましたら、遠慮無くご連絡をいただければと思います。皆様の声を、迅速に反映して、目標である「eラーニングをすべてのひとに！」を実現させていきたいと、心から思い、スタッフ一同活動する毎日です。