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

jQuery mobile frameworkが登場するそうだ。これは、iPhone、iPad、Android端末などのタッチデバイスに最適化したバージョンのjQueryで、多くのスマートフォンに、同一のソースコードで対応できる。

対応プラットフォームは以下のとおりだ。多くの端末に一気に対応でき魅力的。

・iOS
・Android
・BlackBerry
・bada
・Windows Phone
・palm webOS
・symbian
・MeeGo

スマートフォンらしいパーツも完備！

スマートフォン向け　コントロール要素

リリースは2010年末のようですが。待ちきれない！！！

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>

検索エンジン大手のY社には、Yahooカテゴリ登録というサービスがあります。より多くのお客様に、キバンインターナショナルを知ってもらうために、カテゴリ登録申請を出していたのですが、「外部サイトへのリンクにtarget=_blankが指定されていない。」という理由で申請が保留されてしまいました。既に1000ページ近いコンテンツがあることを考えると、1つ1つのリンクを手で修正するのは困難です。そこで、JQueryを使って、外部サイトへのリンクにtarget=_blankを指定するプログラムを作成してみました。

<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
var domain = location.href.match(/^https?(:\/\/[a-zA-Z0-9.]+)\//i)[1];
$(‘a[href^=http]’).not(‘[href*=”‘+domain+'”]’).attr(‘target’,’_blank’);
})
</script>

1行目～4行目:  jQueryが定義されていない場合に、jQueryをインポートします。
7行目: 現在のURLから、ドメイン部分だけを切り出します。
8行目: Aタグの中で、href属性にhttpで始まるURLが指定されており、そのアドレスが同一ドメインのものでない場合に、target属性に_blankを設定します。

弊社では、サイトの大半をWordpressで構築しているので、近日中にWordpressのプラグイン化することになりそうです。

Webアプリを作成していて、Textareaのサイズに悩んだこと、ありますよね？小さすぎると入力しにくいし、大き過ぎると狭い画面を使っている人に不親切。幅は、固定値でもよいですが、高さは内容に応じて変化するといいですよね。ということで、入力内容によって高さが変化するTextareaを作ってみました。

固定サイズのtextareaの例
100px * 40px　高さがたりなくていらいらする例。　こういう入力フィールドって使いにくいですよね。かといって大きすぎるtextareaも困り者です。最適なサイズって、画面サイズや入力内容に依存します。サイズを決めうちしちゃうと、使いにくい入力インタフェースになってしまいます。

可変サイズのtextareaの例
入力内容に応じてサイズの変わるtextareaの例。これなら、入力内容(行数）が多くても困りませんね。classにauto_resizeと指定しておくだけでつかるのでお手軽です。

ソースコード

<script language="JavaScript" src="http://10000.bz/lms/js/jquery-latest.js"></script>
<script language="JavaScript" src="http://10000.bz/lms/js/jquery.autogrow.js"></script>
<script type="text/javascript">
$(function() {
$(‘textarea.auto_resize’).autogrow();
});
</script>

<strong>固定サイズのtextareaの例</strong>
<textarea style="width: 300px; height: 40px;">略</textarea>

<strong>可変サイズのtextareaの例</strong>
<textarea class="auto_resize" style="width: 300px; height: 40px;">略</textarea>

本記事で利用しているプラグインがInternetExplorerで動作しないという事が分かりました。JavaScriptエラーも発生しているためスクリプトを無効化しました。既に、別の解決方法を見つけているのですが、夜も遅いので、明日改めて記事をまとさせていただきます。

2009年11月22日にリリースした、弊社が自信をもってお勧めする最新ＬＭＳ(学習管理システム)のSmartBrainにも、さきほど上記のタイプのtextareaを導入しました。下記のボタンをクリックして、是非ＳｍａｒｔＢｒａｉｎをお試しください。（現時点では、完全無料のベータ運用となっております。）