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

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を選択

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

インストールパスを指定

利用規約に同意

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

利用規約に同意

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

Eclipseのインストール中

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

インストール完了 Eclipseの起動

おおぉ!Eclipse!

Eclipseのスプライト画面

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

ワークスペースを指定

Eclipseが無事に起動しました

Eclipse無事に起動

日本語化

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

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

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

Eclipseの日本語化

日本語化の設定

詳しくは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探しの旅引き続き行ってまいります。



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

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

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

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

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

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

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

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

動作デモ・ソースコード

動作デモ

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

ソースコード

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

ライセンス:WTFPL

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

実装したこと

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

ソースと解説

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

1.表を作る

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

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

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

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

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

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

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

3.JavaScriptを組む

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

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

まとめ

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

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

お役に立てば幸いです。



WordPressの検索フォームのカスタマイズ!カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

  1. searchform.php をテーマフォルダに追加

  2. searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

  3. 検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ(以下例だとpref)をご自身のサイトに付け加えてあげてください。

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル(例:都道府県)
■■■・・・タクソノミーの名前[半角英数](例:pref)

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート(sidebar.php等)に以下のコードを記載します。

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた!

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。



【WP】[Beaver Builder - WordPressページビルダー]プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder- WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを2カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか!と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

Beaver Page Builderのカスタマイズ

[Beaver Builder-WordPressページビルダー]のプラグインページはこちら

Beaver Builderで何ができるのか?

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。(翻訳してくださった方ありがとうございますm(_ _)m)

 

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ?」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

しょっちゅう表示されるテンプレート選択画面

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

 

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。



【PHP】営業日カレンダー表示用PHPクラスを作ってみた

営業日カレンダー

営業日カレンダーを作ることになりそうだったのでサンプルを作ってみた。

まだまだ改善の余地はある。ってか動かなかったらごめんなさい。

ソースコード

Gistに上げました。

好きに使ってください(MITライセンス)。

動作するかどうかは保証しません、動作によって色んなことが起きても自己責任でどうぞ。


<?php
class business_calendar {
const WEEK = 7; // 1 week is 7 days
// holiday_of_week flag index
const IDX_SUNDAY = 0;
const IDX_MONDAY = 1;
const IDX_TUESDAY = 2;
const IDX_WEDNESDAY = 3;
const IDX_THURSDAY = 4;
const IDX_FRIDAY = 5;
const IDX_SATURDAY = 6;
protected $year = "";
protected $month = "";
protected $calendar = array();
protected $holiday_of_week = array();
protected $exception_holidays = array();
protected $exception_business_days = array();
function __construct($year, $month) {
$this->year = $year;
$this->month = $month;
$this->set_holiday_of_week();
$this->clear_exception_holidays();
$this->clear_exception_business_days();
}
function __destruct() {
}
/**
* 毎週の曜日休みを設定する
*/
public function set_holiday_of_week($sunday = false , $monday = false , $tuesday = false , $wednesday = false , $thursday = false , $friday = false , $saturday = false ) {
$holiday_of_week = array();
$holiday_of_week[self::IDX_SUNDAY] = $sunday;
$holiday_of_week[self::IDX_MONDAY] = $monday;
$holiday_of_week[self::IDX_TUESDAY] = $tuesday;
$holiday_of_week[self::IDX_WEDNESDAY] = $wednesday;
$holiday_of_week[self::IDX_THURSDAY] = $thursday;
$holiday_of_week[self::IDX_FRIDAY] = $friday;
$holiday_of_week[self::IDX_SATURDAY] = $saturday;
$this->holiday_of_week = $holiday_of_week;
}
/**
* 休日・稼働日の定義をクリアする
*/
protected function clear_days(&$array_target) {
$array_target = array();
}
public function clear_exception_holidays() {
$this->clear_days($this->exception_holidays);
}
public function clear_exception_business_days() {
$this->clear_days($this->exception_business_days);
}
/**
* 休日・稼働日の定義を追加する
*/
protected function add_day($year,$month,$day,&$array_target) {
$date = date('Ymd', mktime(0,0,0,$month,$day,$year));
if(!in_array($date,$array_target)) {
$array_target[] = $date;
}
}
public function add_exception_holiday($year,$month,$day) {
$this->add_day($year, $month, $day, $this->exception_holidays);
}
public function add_exception_business_day($year,$month,$day) {
$this->add_day($year, $month, $day, $this->exception_business_days);
}
/**
* 休日・稼働日の定義を削除する
*/
protected function remove_day($year,$month,$day,&$array_target) {
$date = date('Ymd', mktime(0,0,0,$month,$day,$year));
$key = array_search($date,$array_target);
if( $key !== false ) {
array_splice($array_target, $key+1, 1);
}
}
public function remove_exception_holidays($year,$month,$day) {
$this->remove_day($year, $month, $day, $this->exception_holidays);
}
public function remove_exception_business_days($year,$month,$day) {
$this->remove_day($year, $month, $day, $this->exception_business_days);
}
/**
* 稼働日チェック
*/
protected function is_businesday_day($day) {
$time = mktime(0,0,0,$this->month,$day,$this->year);
$week_day = (int)date("w",$time);
$date = date("Ymd",$time);
if( in_array( $date, $this->exception_business_days ) ) {
return true;
}
if( in_array( $date, $this->exception_holidays ) ) {
return true;
}
if( isset($this->holiday_of_week[$week_day]) && $this->holiday_of_week[$week_day]) {
return false;
}
return true;
}
/**
* 休日チェック
*/
protected function is_holiday($day) {
$time = mktime(0,0,0,$this->month,$day,$this->year);
$week_day = (int)date("w",$time);
$date = date("Ymd",$time);
if( in_array( $date, $this->exception_business_days ) ) {
return false;
}
if( in_array( $date, $this->exception_holidays ) ) {
return true;
}
if( isset($this->holiday_of_week[$week_day]) && $this->holiday_of_week[$week_day]) {
return true;
}
return false;
}
/**
* カレンダーの値を計算
*/
protected function calc_calendar() {
$first_day = mktime(0,0,0,$this->month,1,$this->year);
$start_offset = (int)date("w",$first_day);
$month_days = (int)date("t",$first_day);
$calendar = array();
$day = 1;
while($day < $month_days):
$row = array();
for($i = 0; $i < self::WEEK; $i++) {
if( ( $day == 1 && $i < $start_offset ) || $day > $month_days) {
$row[] = array("day" => "", "is_holiday" => false);
continue;
}
$holiday_flag = $this->is_holiday($day);
$date = date("Y年m月d日", mktime(0,0,0,$this->month,$day,$this->year));
$day_data = array(
"day" => $day,
"is_holiday" => $holiday_flag,
"value" => $date
);
$row[] = $day_data;
$day++;
}
$calendar[] = $row;
endwhile;
// var_dump($calendar);
$this->calendar = $calendar;
}
/**
* カレンダー出力
*/
public function render() {
$this->calc_calendar();
echo $this->get_table_header();
echo $this->get_table_body();
echo $this->get_table_footer();
}
protected function get_table_header() {
$date = date("Y年m月", mktime(0,0,0,$this->month,1,$this->year));
$html = '<table class="calendar">
<caption>' . $date . '</caption>
<thead>
<tr>
<th class="calendar-day-sunday">日</th>
<th class="calendar-day-monday">月</th>
<th class="calendar-day-tuesday">火</th>
<th class="calendar-day-wednesday">水</th>
<th class="calendar-day-thursday">木</th>
<th class="calendar-day-friday">金</th>
<th class="calendar-day-saturday">土</th>
</tr>
</thead>
<tbody>';
return $html;
}
protected function get_table_body() {
$html = "";
foreach ($this->calendar as $row ) {
$html .= "<tr>";
foreach ($row as $day) {
$html .= $this->get_table_cell($day);
}
$html .= "</tr>";
}
return $html;
}
protected function get_table_cell($day) {
if(empty($day["day"])) {
return "<td class='calendar-cell-empty'></td>";
}
$html = "";
$td_class = 'calendar-cell';
$td_class .= $day["is_holiday"] ? ' calendar-cell-holiday ' : ' calendar-cell-business-day ';
$html .= "<td class='{$td_class}'>";
$html .= '<div>' . $day["day"] . '</div>';
if( $day["is_holiday"] ) {
// 休日
$html .= "休";
} else {
// 営業日
$html .= "営業";
}
$html .= "</td>";
return $html;
}
protected function get_table_footer() {
return '</tbody>
</table>';
}
}

ライセンス

MIT license

使い方

ソースコードをダウンロードしてインクルード頂いた後、こんな感じで使って頂ければと思います。

まとめ

プログラム作るの面白かった。

仕事では未だ使っていないので、動かなかったらごめんなさい。