JavaScriptカテゴリー記事一覧

Aptanaのアップデートが止まっている！
新しいIDEを探そう！

私は以前からAptana（Aptana Studio 3）を愛用しているのですが、2014年頃から新しいバージョンがリリースされず。

このまま使い続けるのもいいのですが、他のIDE(統合開発環境)を模索しても良い頃かと思い、AptanaのベースともなっているEclipseをインストールしてみました。

2017年の6月末にEclipseのバージョン4.7（コードネームをOXYGEN(酸素)）がリリースされており変わらず活発にアップデートがされているようです。

今回はWindows 10（64bit）でEclipseをインストールする手順をまとめてみました。

日本語化についても簡単に触れていますが不足部分はググってくださいませ。

ダウンロード

公式サイトのダウンロードページへアクセス

https://www.eclipse.org/downloads/

ダウンロードボタンをクリック。

もう一度ダウンロードボタンをクリック

ダウンロードが開始される。

お金に余裕のある方は、ダウンロード中の画面に表示される寄付を検討してみてくださいませ。

インストール

ダウンロードしてきた、「eclipse-inst-win64.exe」をダブルクリックしてインストール操作を行います。

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

よく内容を読み、Accept Nowをクリック。

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

Eclipseの日本語化といえば、Pleiades (プレアデス)。

公式サイトよりPleiadesのプラグインをダウンロード

Pleiades – Eclipse プラグイン日本語化プラグイン
http://mergedoc.osdn.jp/

日本語化の設定

詳しくはreadme_pleiades.txtを参照ください。

readme_pleiades.txtより、設定方法部分だけ以下に抜粋します。

1. pleiades_x.x.x.zip を解凍し、plugins、features ディレクトリーを <ECLIPSE_HOME> ディレクトリーに
コピー。(<ECLIPSE_HOME> は Eclipse デフォルトの plugins や features があるディレクトリー)
2. eclipse.ini の最終行に以下の 2 行を追加。Xverify は Eclipse 4.4 以降で必須で、これを指定しないと
起動できなかったり、一部の機能が正常に動作しない可能性があります。
Windows 以外の場合は後述の Eclipse 起動オプション参照してください。
-Xverify:none
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
3. Pleiades スプラッシュ画像を使う場合は
eclipse.ini の -showsplash org.eclipse.platform (実際は 2 行) を削除。

最低限1と2だけ行えばEclipseが日本語化されます。

まとめ

以前Javaでプログラムをしていた頃と比べるとロゴがおしゃれになっていたり、Eclipse Marketplace が出来ていたりと色々なアップデートが加えられているようです。

Eclipseを試してみつつ、IDE探しの旅引き続き行ってまいります。

表を検索したい！簡単に！

都道府県別にある情報を簡単に絞り込みたい。というご要望。

セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。

というかたちで実装を考えました。

テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。

jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。

参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。

動作デモ・ソースコード

動作デモ

http://onocom.net/code/japan-prefecture/

ソースコード

https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570

ライセンス：WTFPL

好きに利用して改変して下さい。

実装したこと

セレクトボックスで選択した値(value)で表を検索（絞り込み）する機能を実装します。

ソースと解説

ソースコードサンプルと合わせてご覧くださいませ。

1.表を作る

取り敢えず検索するための表を作ります。

今回、都道府県の一覧表を作りました。

theadに見出しを。tbodyにデータを記述しましょう。

<table class="table table-borderd">
    <thead>
        <tr class="active">
            <td>番号</td>
            <td>都道府県名</td>
            <td>読み</td>
            <td>都道府県庁 所在地</td>
            <td>最大都市</td>
            <td>地方</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>北海道</td>
            <td>ほっかいどう</td>
            <td>札幌市</td>
            <td>札幌市</td>
            <td>北海道</td>
        </tr>
        <tr>
            <td>02</td>
            <td>青森県</td>
            <td>あおもりけん</td>
            <td>青森市</td>
            <td>青森市</td>
            <td>東北</td>
        </tr>
        ・・・
    </tbody>
</table>

<thead>

<td>都道府県名</td>

<td>都道府県庁所在地</td>

</tr>

</thead>

<tbody>

<tr>

<td>ほっかいどう</td>

</tr>

<tr>

<td>あおもりけん</td>

</tr>

・・・

</tbody>

</table>

2.都道府県選択用のセレクトボックスを作る

表を絞り込む為のセレクトボックスを作ります。

<select id="pref-select" class="form-control">
    <option value="">都道府県で絞り込み</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    ・・・
</select>

<option value="">都道府県で絞り込み</option>

・・・

</select>

optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。

<option value="青森県">青森県で絞り込む</option>

1	<option value="青森県">青森県で絞り込む</option>

また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。

3.JavaScriptを組む

キモとなるJavaScriptのコードは以下のように記述します。

コメントで処理を補足しておりますので、参考にしてみてくださいませ。

jQuery(function ($) {
    // セレクトボックスが変更されたら処理をする
    $('#pref-select').change(function () {
    
        // 選択した値を取得
        var select_val = $('#pref-select option:selected').val();
        
        // tbodyのtr数回 処理をする
        $.each($("#pref-table tbody tr"), function (index, element) {
        
            // 選択した値が空欄だったら、全ての行を表示する為の処理
            if (select_val == "") {
                $(element).css("display", "table-row");
                return true; // 次のtrへ
            }
            
            // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック
            var row_text = $(element).text();
            
            if (row_text.indexOf(select_val) != -1) {
                // 見つかった場合は表示する
                $(element).css("display", "table-row");
            } else {
                // 見つからなかった場合は非表示に
                $(element).css("display", "none");
            }

        });
    });
});

jQuery(function ($) {

// セレクトボックスが変更されたら処理をする

$('#pref-select').change(function () {

// 選択した値を取得

var select_val = $('#pref-select option:selected').val();

// tbodyのtr数回処理をする

$.each($("#pref-table tbody tr"), function (index, element) {

// 選択した値が空欄だったら、全ての行を表示する為の処理

if (select_val == "") {

$(element).css("display", "table-row");

return true; // 次のtrへ

}

// 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック

var row_text = $(element).text();

if (row_text.indexOf(select_val) != -1) {

// 見つかった場合は表示する

$(element).css("display", "table-row");

} else {

// 見つからなかった場合は非表示に

$(element).css("display", "none");

}

});

まとめ

あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。

もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。

お役に立てば幸いです。

カテゴリー: JavaScript

[IDE] Eclipse 4.7（OXYGEN）のインストール手順と日本語化

Aptanaのアップデートが止まっている！
新しいIDEを探そう！

ダウンロード

公式サイトのダウンロードページへアクセス

インストール

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

公式サイトよりPleiadesのプラグインをダウンロード

日本語化の設定

まとめ

[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)

表を検索したい！簡単に！

動作デモ・ソースコード

動作デモ

ソースコード

実装したこと

ソースと解説

1.表を作る

2.都道府県選択用のセレクトボックスを作る

3.JavaScriptを組む

まとめ

Aptanaのアップデートが止まっている！ 新しいIDEを探そう！

ダウンロード

公式サイトのダウンロードページへアクセス

インストール

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

公式サイトよりPleiadesのプラグインをダウンロード

日本語化の設定

まとめ

表を検索したい！簡単に！

動作デモ・ソースコード

動作デモ

ソースコード

実装したこと

ソースと解説

1.表を作る

2.都道府県選択用のセレクトボックスを作る

3.JavaScriptを組む

まとめ

Aptanaのアップデートが止まっている！
新しいIDEを探そう！