「ノンプログラマーのためのjQuery生成ツール」作りました

「ノンプログラマーのためのjQuery生成ツール」作りました

Posted at November 13,2012 1:55 AM
Tag:[jQuery, Tool]

ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。

ノンプログラマーのためのjQuery生成ツール
ノンプログラマーのためのjQuery生成ツール

サンプル表示つき
ノンプログラマーのためのjQuery生成ツール

このツールは「7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。

コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。

追記:イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。

追記:イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。

ツールチップを表示
ツールチップ

やっつけで作ったので中のコードはかなりひどいです。あしからず。

1.使い方

本エントリーの2項から解説していますが、サンプル表示つきのページで入力データと実行結果を見比べれば、なんとなく雰囲気がつかめると思います。

以下、それぞれの項目について解説します。

2.HTML読み込み完了後に実行する

HTML読み込み完了後に実行したい場合、「HTML読み込み完了後に実行する」のチェックボックスをチェックします。

HTML読み込み完了後に実行する

チェックすると、「$(function(){...}」で全体を括ります。

$(function(){
    // ...
}

3.イベント発生で実行する

「イベント発生で実行する」のチェックボックスをチェックすると、入力フォームが表示されます。

(クリックで拡大)
イベント発生で実行する

入力フォームには以下の3項目を設定します。

  • イベント発生対象のid属性・class属性または要素の種別。この部分を設定すれば、id属性値に「#」、class属性値に「.」を付与します。「要素+class属性」などの組み合わせで設定する場合は、空白を選択したあと「#」や「.」を手動で付与してしてください
  • イベント発生対象のid属性・class属性または要素の名称
  • 発生イベント名

上記の設定であれば、次のコードを出力します。

$('#foo').click(function(){
    // ...
}

4.実行時のAPI

jQueryのAPIを設定します。

(クリックで拡大)
イベント発生で実行する

入力フォームには以下の3項目を設定します。

  • API実行対象のid属性・class属性または要素の種別。この部分を設定すれば、id属性値に「#」、class属性値に「.」を付与します。「要素+class属性」などの組み合わせで設定する場合は、空白を選択したあと「#」や「.」を手動で付与してしてください
  • API実行対象のid属性・class属性または要素の名称
  • API名

上記の設定であれば、次のコードを出力します。

$('.bar').css();

5.実行時のパラメータ

jQueryのAPI実行時のパラメータを設定します。たとえばcss()を実行する場合、

css('color','#ffffff');

の「color」や「#ffffff」がパラメータになります。

パラメータが必要な場合は「実行時のパラメータ有無」をチェックします。

実行時のパラメータ有無

チェックした後、パラメータ数設定用のラジオボタンが表示されるので「1つ」または「2つ」を選択してください。

パラメータ数

さらに、選択したパラメータ数に応じた入力フィールドが表示されるので、パラメータを設定します。

「1つ」を選択した場合
「1つ」を選択した場合

「2つ」を選択した場合
「2つ」を選択した場合

文字列・数値はツールで判定して、クォーテーションを自動的に付与します。

6.結果の表示

各データを設定後「実行」をクリックすればテキストエリアにjQueryのコードを出力します。

パラメータ数

チェックボックスのチェック状態やデータの内容によって出力が変わるので、色々試してみてください。

7.メソッドチェーン

メソッドチェーンしたい場合、「メソッドチェーンする」をチェックします。

メソッドチェーン

メソッドチェーン用のフォームが表示されるので、4項(実行対象を除く)および5項と同じように設定してください。メソッドチェーンは何回でも行えます。

(クリックで拡大)
メソッドチェーン用のフォーム

メソッドチェーン用フォームについては、表示・非表示の制御が完璧にできていないので、すいませんがチェックボックスやラジオボタンはきちんと設定してください。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)