Category Archives: Javascript

【JavaScript-MVVM】Knockout ドキュメント翻訳中!

ただいまスコブトでは、MVVM 設計モデルを提供するJavaScript フレームワーク「Knockout」のドキュメント翻訳を行なっております。 Knockout.日本語ドキュメント なぜかと言ったら、やはり流行って欲しいからです。 JavaScript の MV* フレームワークは、有名なものでも10種類以上あります。 参考:The Top 10 Javascript MVC Frameworks Reviewed すべてのフレームワークを試したわけではありませんが、私が Knockout をおすすめする理由は、その学習コストの低さと、他のフレームワークとの親和性にあります。 Knockout は強力なバインド機構を提供するフレームワークであり、それ以上でも以下でもありません。バインド機構は、単純に言えば「背後のデータ・モデルの値と画面を同期する仕組み」です。これは MVVM (Model-View-ViewModel) 設計パターンの前提です。MVVM が何たるかについては概念から学ばれることをおすすめしますが、本家チュートリアル を一度試していただければ、バインド機構がもたらすメリットがわかるはずです。 Knockout のバインド機構について理解したらすぐにでも使い始めることができますが、Knockout の優れている点はそれにとどまりません。Knockout はバインド機構以外に提供するものはありませんが、慣れ親しんだ jQuery や クライアントサイド・ルーティングを提供する Sammy.js、オブジェクト指向ライブラリの Base.js など様々なライブラリと組み合わせることで、更にパワフルな開発を行うことができます。 Knockout.日本語ドキュメントでは、今のところドキュメントの翻訳を進行中ですが、今後 Tips の公開や カスタムバインディング を共有できるフォーラムの開発を検討しています。

Posted in: Javascript, Web

EclipseでCSS/Javascriptを自動minimizeする方法

WebサイトやWebサービスを新たに公開する際、 気を配るべきはデザイン性や機能性だけではありません。 せっかく優れたサイトであっても、表示に時間がかかってしまうと 訪れた人は待ちきれずに去ってしまうかもしれません。 サイトの表示速度を向上するためにできることはいくつかあります。 コンテンツのファイルサイズを小さくする Webサーバのチューニング プログラムのパフォーマンスチューン etc… 中でも、意外と無駄が多いのが Javascript や CSS などのソースコード資材です。 丁寧にコメントを書き入れている場合、開発や保守の観点ではとても有用です。 しかし、サイトを訪れた人にとってはメリットがありません。 改行やインデントについても、同じことが言えます。 今回は普段Eclipseを使用されている方向けに、 CSSとJavascriptのソースコードを自動でminimize(省サイズ化)する簡単な方法を紹介します。 内容にもよりますが、Javascript/CSSのファイルサイズを20%~80%削減することができます。 この方法で実現するもの ビルド時に「~.src.js」を自動minimize→ 同じフォルダに「~.js」として保存 ビルド時に「~.src.css」を自動minimize→ 同じフォルダに「~.css」として保存 それぞれファイルサイズを20%~80%削減 YUICompressorを手に入れる(無料) この方法ではYUICompressorのminimize機能を利用します。 次の手順で手に入れて下さい。 次のURLにアクセスし、「Version 1.x.xxx(xxxは最新の値)」をクリックしダウンロードします。 http://yuilibrary.com/download/builder/(ダウンロード-ビルドツール) ダウンロードした「builder_1.x.xxx.zip」を解凍すると、「builder」というフォルダが展開されます。 少し階層が深いですが、YUICompressorはその中にあります。 builder > componentbuild > lib > yuicompressor > 【yuicompressor-2.4.2.jar】 Eclipseで自動的にminimizeされるようにする Eclipseのワークスペースフォルダを開き、「.yuicompressor」というフォルダを追加します。 (Windowsの場合、GUIで「.」から始まるフォルダを作成できないことがあります。その場合は「.」を省くか、コマンドプロンプトから作成してください。) 作成したフォルダの中に、先ほど入手した「yuicompressor-2.4.2.jar」を配置して下さい。 次に、それぞれのOSに応じて、バッチスクリプトを作成・配置して下さい。 Linux / Mac OS の方はこちら【yuicompressor.sh】 1 2 … Continue reading →

Posted in: Javascript, Web

Knockout.js で jQuery UI ‘sortable’を使う

前回に引き続き、勉強中の Knockout の記事です。 今回は、リッチなUIを手軽に実装できる jQuery UI との組み合わせを検証してみました。 jQuery UI ‘sortable’ とは sortable とは jQuery UI に含まれる機能で、リスト要素などの各アイテムをドラッグ&ドロップで並び替えできるようにするものです。 sortable の動きについては jQuery UI Demos & Documentation を見ていただければわかると思います。 Knockout と組み合わせる デモはこちらです(別画面で開きます) JSFIDDLE でも公開しました Knockout で jQuery UI などのプラグインをバインドで実行できるようにするため、カスタムバインディングを作成します。 今回は、名前もそのまま「sortable」というカスタムバインディングを作成しました。 ko.sortable.js 4.35KB ライセンスフリー ↑右クリックして「名前をつけて保存」してください。 knockout.js の後に読み込まれるように設置すればOKです。 次のサイト・ページを参考にしました。 ・http://stackoverflow.com/questions/4146751/knockoutjs-with-jquery-ui-sortable ・http://jsbin.com/knockoutsortable/20/edit HTML で、通常の foreach バインディング(もしくは template バインディング)とともにバインドします。 (相応の ViewModel が適用されているものとします。) 1 2 … Continue reading →

Posted in: Javascript, Web

Knockout.js勉強中! サンプルアプリ『電卓』

最近、Knockout というJavascriptフレームワークにハマってます。 JSでの開発をラクにするKnockout Knockoutは一言で言えば、「HTML(CSS)とJavascriptによる開発にMVVMモデルを適用する」ためのフレームワークです。 フレームワークといっても、開発者を制約で縛り上げるようなものではなく、開発がとてもラクになります。 たとえば Knockout では、HTMLの要素と、Javascriptで書いたシンプルなオブジェクトのプロパティを、定義ベースで関連付けます。 関連付けられたプロパティが更新されると、HTMLの要素も上書きされます。 これだけでも、次のようなメリットが考えられます。 「開発効率向上」マークアップエンジニアとスクリプトエンジニアの分業 「保守性向上」マークアップ(View)の変更によるスクリプト(ViewModel)への影響がほとんどない 単純に、書くべきコードの量が減る! Knockoutがフレームワークとして介入するのは HTML(View) と Javascript(ViewModel) との間を取り持つ部分のみです。 したがってjQuery等の既存のフレームワークも、問題なく利用することができます。 詳細は本家サイトにて公開されているデモムービー(英語だがなんとなく見てるだけでも結構わかる!)などをご参考下さい。 同サイトのチュートリアルをすべてクリアすれば、Knockoutを理解するとともにMVVMパターンのメリットについても少し詳しくなれます。 12/23 追記: Knockout ドキュメントの翻訳を開始しました。 Knockout.日本語ドキュメント 下記のサンプルは、やや「モンキーレンチで釘を打っている」ような、意味開発者の意図を伝えきれていないという問題があります。Knockout でどんなことができるかを手っ取り早く知りたいという方には、Knockout Demo & Tips をご覧になることをお勧め致します。 勉強中にサンプルつくりました というわけで、さっそくサンプルとして電卓を作ってみました。 ただの電卓だけだと、MVVMの恩恵をあまり受けられないので、計算履歴を表示するようにしました。 デモはこちら HTML (View) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 … Continue reading →

Posted in: Javascript, Web

【jQuery】要素の”外側”のクリックイベントを捕捉「skOuterClick」

jQueryでダイアログボックスのような機能を開発していたとき、ふと「ある要素”以外”」にクリックイベントハンドラを仕掛けられたらいいのにと思いました。 そんな思いでプラグインを探していたところ、kawama.jpさんの記事 jqueryで指定要素”以外”のクリックイベントを実装するouterClickプラグイン にたどり着きました。 残念なことに現在は肝心のプラグインが公開されておらず、リンク切れになってしまっている模様です。ほかを探してみましたが、探し方が悪いのか一向に見つからず…。 ということで、outerClickプラグインのスコブト版、その名も「skOuterClick」を作りました!

Posted in: Javascript, Web

【jQuery】真・入力欄にフォーカスすると消えるヒントを表示する方法

まずは、こちら↓をご覧下さい。 名前を入力して下さい SE時代にWeb系の試験をしていて、「~を入力して下さい」ように「ヒント」として初期値を表示しておいてフォーカスが当てられると初期値を消去するフォーム部分にてバグが発覚したことがあります。 当時は「仕様です」という言葉でクローズされたのですが・・・。 今回は「仕様です」と言わずに済むスマートな実現方法を紹介します。

Posted in: Javascript, Web