月別アーカイブ: 2014年3月

jQuery：テキスト入力の候補を表示するプラグイン「Completer」

Posted on by
返信

jQueryのプラグイン「Completer」を使用してみたので、使用方法をメモします。

「Completer」はフォームのテキスト入力時に、入力の候補を表示することができるプラグインです。

「Completer」

http://fengyuanchen.github.io/completer/

jquery_Completer

メールアドレスやURLなど、形式が決まっている場合は、
テキスト入力時に候補が表示されると使いやすいと思います。

下記にjQueryのプラグイン「Completer」を使用して、テキスト入力時に候補を表示し、
入力の補助（オートコンプリート）をした時の方法をメモします。

■ テキスト入力の候補を表示する「Completer」

【読み込むファイル】

jQueryと各ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./completer.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript"  src="./completer.js"></script>

【JS】

使用するテキストボックスのidを指定して、Completerを使用します。

<script type="text/javascript">
$(function() {
    $("#completer-email").completer({
        separator: "@",
        position: "bottom",
        source: ["gmail.com", "yahoo.co.jp", "infoseek.jp"]
    });
});
</script>

「separator」に値との間に使用する文字を指定します。
「source」に候補で表示する値を設定します。
「position」で候補が表示される位置を指定することができます。デフォルトは「”bottom”」です。
inputタグに直接「data-position=”top”」と指定しても大丈夫です。
（”top”、”right”、”bottom”、”left”）

【HTML】

Completerを使用する為にidを指定します。

<input type="text" id="completer-email" />

また、inputタグに直接指定することも可能です。

【HTML】

<input type="text" completer data-separator="@" data-source="['gmail.com', 'yahoo.co.jp', 'infoseek.jp']" />

下記のように入力候補を表示することが表示させることができます。

jquery_Completer_demo

他にもオプションを使って、色々な使い方ができるようです。
ユーザにとって入力しやすくなるので、活用できそうなプラグインです。

Linux：SSH接続時のポート番号を変更する方法

Posted on by
返信

LinuxサーバでSSHで接続する時のポート番号を変更する方法をメモします。

SSHのポート番号は初期状態は22番ポートで設定されています。

そのままにしていると悪意のある人から攻撃を受ける可能性があるので、
セキュリティ対策としてポート番号は必ず変更しておいた方がいいです。

SSHのポート番号を変更する際は、iptablesとsshd_configの設定を変更します。

下記にLinuxサーバでSSHのポート番号を変更した時の手順を記述します。

■ SSH接続のポート番号を変更

※ポート番号を「50022」に変更する場合

SSHでログインし、スーパーユーザー（root）なります。

su -

スーパーユーザーになったら、iptables（ファイアウォール）の設定を変更します。
下記コマンドでiptablesを編集します。

vi /etc/sysconfig/iptables

新しく接続を許可するポート番号を追加します。

-A INPUT -p tcp -m tcp --dport 22 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 50022 -j ACCEPT

保存が完了したら、iptablesを再起動します。

/etc/init.d/iptables restart

次にSSHの設定ファイルを変更します。
下記コマンドでsshd_configを編集します。

vi /etc/ssh/sshd_config

「Port 22」の箇所を「#」でコメントアウトし、
「Port 50022」を追加します。

#Port 22
Port 50022

保存が完了したら、sshdを再起動します。

/etc/init.d/sshd restart

設定が間違っていた場合など、接続できなくなるので、
現在の接続は絶対に切らずに、別の画面で新規に接続をします。

変更したポート番号でSSH接続ができるか確認します。

変更したポート番号で接続ができ、22番ポートで接続できなければ完了です。

新しく設定したポート番号で接続ができない時は、
設定を最初の状態に戻して、再起動します。
最初の情報で接続できるかを確認します。

設定が完了したら、iptablesの設定で22番ポートを拒否するように設定します。

#-A INPUT -p tcp -m tcp --dport 22 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 50022 -j ACCEPT

22番ポートをコメントアウトし、iptablesを再起動します。

Linux：現在作業している場所(ディレクトリ)を知る「pwd」

Posted on by
返信

LinuxサーバでSSHでサーバにログインし、色々ディレクトリを移動していると
現在の作業している場所が分からなくなることがあります。

階層が深くなればなるほど、自分がどこのディレクトリにいるのかわからなくなります。

pwdコマンドを使用すれば作業している位置を知ることが可能です。
結構、頻繁的に使うことが多いです。

Linuxのpwdコマンドを使用して、現在の作業しているディレクトリを確認する方法をメモします。

■ pwdコマンド

現在、作業しているディレクトリ（カレントディレクトリ）を
絶対パスで表示します。

pwd

■ pwdコマンドで現在の作業しているディレクトリを表示

※「/home/hoge/public/image/tmp」に移動した場合

pwdコマンドを実行します。

pwd

【出力結果】

/home/hoge/public/image/tmp

カレントディレクトリが表示されるので、現在の場所を確認することができます。

間違った作業をしない為にも自分のいる場所を知ることは重要だと思います。

Fuelphp：fuelphpでJOINしてデータを取得する方法

Posted on by
返信

FuelphpでQuery_Builder_Selectクラスのjoinメソッドを使用しました。

データベースからデータを取得する際に複数のテーブルを結合して、
データを取得することがあります。

JOINを使用すれば異なるテーブルを結合してデータを取得することが可能です。

下記にFuelphpのjoinメソッドを使用して、複数のテーブルを結合しデータを取得する時の方法をメモします。

■ Fuelphpで複数のテーブルをJOINしてデータを取得

joinメソッドとonメソッドの記述方法は下記のようになります。

【joinメソッド】

join('テーブル', 'タイプ')

タイプには「INNER」「LEFT」「RIGHT」などを指定します。

【onメソッド】

on('テーブル.カラム', '=', 'テーブル.カラム')

※テーブル「item」「item_detail」をJOINする場合

・itemテーブルのデータを取得する場合

$query = \DB::select()->from('item');
$res = $query->execute()->as_array();
SELECT * FROM `item`;

・itemテーブルとitem_detailテーブルをJOINしてデータを取得する場合

$query = \DB::select()->from('item');
$query->join('item_detail', 'LEFT');
$query->on('item.id', '=', 'item_detail.item_id');
$res = $query->execute()->as_array();
SELECT * FROM `item` LEFT JOIN `item_detail` ON (`item`.`id` = `item_detail`.`item_id`);

Javascript：print()メソッドを使用して印刷ボタンを設置

Posted on by
返信

Javascriptのprint()メソッドを使用して、印刷ボタンを設置した時の方法をメモします。

データなどを出力する場合など、WEBページを印刷することがあります。

ブラウザのヘッダーにあるメニューからページを印刷してもいいのですが、
ページ内に印刷ボタンがあった方が効率が良い場合があります。

print()メソッドを使用すると、簡単に印刷ダイアログを呼び出してページを印刷することが可能です。

また、ボタンではなくリンクで設定することも可能です。

■ print()を使用して印刷ボタンを設置

【HTML】

・ボタンで設定する場合

<input type="button" value="印刷する" onclick="window.print();" />

・リンクで設定する場合

<a href="#" onclick="window.print(); return false;">印刷する</a>

■ 印刷用のCSSを作成する場合

印刷時に印刷するボタンやリンクなどを隠したいなど、
印刷用のスタイルを適用させたい場合があります。

head内で読み込むCSSファイルに「media=”print”」を設定します。

※印刷時にスタイルが適用されます。

<link rel="stylesheet" type="text/css" href="./print.css" media="print" />

ページ表示用とは別に作成した方がいいと思います。

印刷に不要な部分を非表示にする場合は下記のように記述します。

【CSS】

.noprint {
	display: none;
}

【HTML】

<div class="noprint">
    <a href="#" onclick="window.print(); return false;">印刷する</a>
</div>

長いページなど、改ページの位置を指定したい場合は下記のように記述します。

【CSS】

div.pagebreak {
	page-break-after: always;
}

【HTML】

<div class="pagebreak">
    印刷する内容
</div>

印刷するようなページを作る場合は、印刷するボタンやリンクがあった方が楽に印刷ができると思います。
また、ブラウザのバージョンによっては、print()メソッドが使用できない場合があるようです。