cakephp/wordpress/flash/flex/iPhone/mixiアプリの開発しています。
「DOM Monster」はHTMLの構造を判断して、ブラウザに優しい作り方をしているか判定してくれるブックマークレットです。
使い方は簡単で、調べたいサイト上でブックマークを実行するだけです。
問題がある場合に、解決方法を教えてくれます。
試しに当サイトで実行してみました。
あら。WARNで改善した方が良いよと言われてしまいました。
どうやらJSの読み込みが多いのが問題のようです・・・
いつか改善しますかね。
ページの健康状態をはかるのに、試してみてはいかがでしょうか。
「ExpressJs」はSinatra風の記述の仕方ができるJavaScriptライブラリです。
SInatraはRubyで実装されており、
アクセスしたURL毎にメソッドを振り分ける事ができるようになる軽量のフレームワークです。
その設計思想をJavaScriptにも！という事で作られたようで、
ちょっとしたアプリケーション開発には良さそうです。
コードは以下のような書き方になります。
var app = express.createServer();
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(3000);
ルートにアクセスしたらHello Worldが出力されるようになります。
URLルーティング
リダイレクトヘルパー
動的ビューのヘルパー
ハイパフォーマンス
セッション処理
高いテストカバレッジ
使用にはnode.jsが必要になりますので、気をつけてください。
「<angular/>」はデータバインドが使えるようになるJavaScriptフレームワークです。
データバインドとはデータベース等から動的に取り出したデータを指定のタグを使用する事で自動的に置き換える技術です。
View（テンプレート）の記述の仕方が非常に楽になるので、ちょっと良さそうです。
以下のコードで実行できるようになります。
<script type="text/javascript" src="http://angularjs.org/ng/js/angular-debug.js" ng:autobind></script> 名前:
Hello {{name}}!
実行すると、{{name}}の部分がフォームのname値に置き換わるようになります。
その他のデモの一覧はここから見る事ができます。
jQueryとも共存できるように設計されているようですので、
使ってみると面白いかもしれません。
「Embedded Help System」はヘルプシステムを埋め込めるjQueryプラグインです。
操作説明など複数手順が必要な説明って言葉だけだと難しいですよね。
このプラグインを使用する事で
操作させる順番の数字アイコンを表示させたり、どこにマウスを持っていけばよいか、を簡単に伝えられるようになります。
以下は実際に使ってみた様子です。
↑１番のアイコンが表示されるのでマウスオーバーすると説明が表示されます。
↑２番目のアイコンにマウスオーバーした所です。
実際の動きはデモページから確認する事ができます。
サイトの左側にあるHow to…と赤字になっているメニューをクリックしてみてください。
ユーザーを誘導するマウスのアニメーション表示など便利そうです。
「jNotify」はサイト上のアラートをアニメーションさせながら表示させるjQueryプラグインです。
デザインは青、赤、緑の3種類用意されていました。
表示させたい内容で使い分けられそうですね。
本文にはHTMLも使用可能との事なので使い勝手はとても良さそうです。
コードは以下のような内容で設置可能でした。
プラグインのオプションで
表示時間、位置、アニメーションの有無、不透明度などが設定可能です。
$(document).ready(function(){
$("a.exemple").click(function(e){
e.preventDefault();
jNotify(
'Here the message !!You can write HTML code bold, italic, underline',
{
autoHide : true, // added in v2.0
clickOverlay : false, // added in v2.0
MinWidth : 250,
TimeShown : 3000,
ShowTimeEffect : 200,
HideTimeEffect : 200,
LongTrip :20,
HorizontalPosition : 'center',
VerticalPosition : 'top',
ShowOverlay : true,
ColorOverlay : '#000',
OpacityOverlay : 0.3
});
});
});
単純なアラートではなく見た目を変化させる事で
ような情報なのか伝わり安くなりますね。
「JSZip」はブラウザ上でファイルを圧縮できるJavaScriptライブラリです。
ユーザーに複数のファイルを提供する最も簡単な方法は、圧縮ファイルですよね。
JSZipはzipファイルの作成をクライアント側でやってしまおう！というクールなライブラリになっています。
「Smartupdater」は定期的にサーバーにデータを取得しに行くjQueryプラグインです。
使い方としては、
などの使い道がありそうです。
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。
CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。
詳しくは以下
「JavaScript Pre-Processor（jspp）」はjQuery風な書き方ができるサーバーサイドJavaScriptです。
使用するにはnode.jsが必要になりますが、JavaScriptでhtmlやcssを動的に出力する事ができるようになります。
記述の仕方は２パターンあるようで、php風な開始タグ<?jsppとscriptのtype属性にapplication/jsppを使用する書き方がありました。
使い方はこんな感じになるそうです。
Hello World
$(this).text("Hello World!!"); end();
jQuery風に $ を使用してDOMにアクセスできるのは便利そうです。
0