jQueryを使用してWEBサイトを制作している時に、使用しているjQueryのバージョンを確認することがあります。
新しいプラグインを導入する時など、対応していないバージョンがあるので、jQueryのバージョン確認を行います。
また、jQueryが動かない時なども確認を行います。
そのjQueryのバージョンを確認する際の簡単な確認方法をメモします。
確認を行いたいページで下記のjavascriptを実行します。
alert($.fn.jquery);
アラートで下記のように表示されます。
また、ブックマークに下記を登録しておくとページ内に記述しなくても簡単に確認ができます。
javascript:alert($.fn.jquery);
jQueryのバージョンを確認したいページで登録したブックマークを呼び出すと同じようにアラートを出力します。
※Firefoxで登録した場合
とても便利なのでブックマークにしておくと楽にバージョン確認が行えて良いと思います。
Gmailに他のメールアカウントを設定しようとした際、エラーが出力されて設定できませんでした。
そのエラーが出た時の対処方法をメモします。
Gmailに他のメールアカウントを設定する時は、設定画面のアカウントタブを開き「自分の POP3 メール アカウントを追加」をクリックします。
メールアドレス入力後、メール設定した時に下記のエラーが表示されました。
Connection timed out: There may be a problem with the settings you added. Please contact your other email provider to verify the correct server name and port.
色々調査したところ、サーバのファイアウォールの設定に問題がありました。
iptablesの設定で110番ポートが日本からのみアクセス許可されていたのが原因だったようです。
下記にiptablesの変更点を記載します。
■ iptablesの設定変更
「ACCEPT_COUNTRY」を「ACCEPT」に変更します。
-A INPUT -p tcp -m tcp --dport 110 -j ACCEPT_COUNTRY
↓
-A INPUT -p tcp -m tcp --dport 110 -j ACCEPT
設定完了後、再度Gmailに設定したら正常に設定することができました。
Fuelphpでデータベースに接続する時の設定ファイルは下記の場所にあります。
/fuel/app/config/db.php /fuel/app/config/development/db.php
データベースの設定ファイルに別のデータベース情報を追加することで複数のデータベースを使用することが可能です。
下記にFuelphpで複数のデータベースに接続する為の設定方法・使用方法をメモします。
■ 設定方法
下記のファイルに新しく設定するデータベース情報を追加します。
・「fuel/app/config/db.php」
【修正前】
return array( 'active' => 'default', 'default' => array( 'type' => 'pdo', 'connection' => array( 'persistent' => false, ), 'identifier' => '`', 'table_prefix' => '', 'charset' => 'utf8', 'enable_cache' => true, 'profiling' => false, ), 'redis' => array( 'default' => array( 'hostname' => '127.0.0.1', 'port' => 6379, ) ), );
【修正後】
return array( 'active' => 'default', 'default' => array( 'type' => 'pdo', 'connection' => array( 'persistent' => false, ), 'identifier' => '`', 'table_prefix' => '', 'charset' => 'utf8', 'enable_cache' => true, 'profiling' => false, ), 'redis' => array( 'default' => array( 'hostname' => '127.0.0.1', 'port' => 6379, ) ), // 追加 'sample' => array( 'type' => 'pdo', 'connection' => array( 'persistent' => false, ), 'identifier' => '`', 'table_prefix' => '', 'charset' => 'utf8', 'enable_cache' => true, 'profiling' => false, ), );
・「fuel/app/config/development/db.php」
【修正前】
return array( 'default' => array( 'connection' => array( 'dsn' => 'mysql:host=localhost;dbname=hoge', 'username' => 'ユーザー名', 'password' => 'パスワード', ), ), );
【修正後】
return array( 'default' => array( 'connection' => array( 'dsn' => 'mysql:host=localhost;dbname=hoge', 'username' => 'ユーザー名', 'password' => 'パスワード', ), ), // 追加 'sample' => array( 'connection' => array( 'dsn' => 'mysql:host=localhost;dbname=sample', 'username' => 'ユーザー名', 'password' => 'パスワード', ), ), );
■ 使用方法
追加したデータベースに接続する場合は、下記のように記述します。
$query = \DB::select()->from('test');
$query->execute('sample')->as_array();
execute()に追加したデータベースを指定するとデータを参照することができます。
私の周りでは友達と連絡をとる時にLINEを使用することが多くなっています。
また、LINEでURLを送信したりなど情報共有することがよくあります。
WEBページに「LINEで送る」ボタンがあれば、簡単に周りと情報共有することができるので、スマホのページに「LINEで送る」を設置しました。
「LINEで送る」ボタンを設置した時の方法をメモします。
今はスマホを持っている人が多いので、ブログやホームページ等に設置するとユーザにとって情報共有しやすいし、サイトへの集客にもなるのでいいと思います。
■ 「LINEで送る」ボタンの設置方法
下記のURLにアクセスします。
http://media.line.naver.jp/howto/ja/
ボタンのタイプを選択、送るテキストを選択するとHTMLのソースに貼り付けるコードが表示されます。
<span>
<script type="text/javascript" src="//media.line.naver.jp/js/line-button.js?v=20131101" ></script>
<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>
表示されたコードをコピーして、設置したい場所に貼り付けるだけで、設定することができます。
また、最初の設定ではPCでは表示しない設定になっています。
PCで「LINEで送る」ボタンを表示させたい場合は、「”pc”:false」の箇所を「”pc”:true」にします。
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});
↓
new jp.naver.line.media.LineButton({"pc":true,"lang":"ja","type":"a"});
ただ、PCで「LINEで送る」ボタンをクリックすると公式サイトに遷移してしまうので、PCでは非表示でもいいのかなって思っています。
とても簡単に設置することができるのでブログなどをしている方におすすめです。
jQueryの「jquery.tile.js」プラグインを使用して、カラムの高さを揃える方法をメモします。
「jQueryAutoHeight.js」プラグインでも良いのですが、こちらも使用しやすいです。
「jquery.tile.js」は一行の要素数を数字で指定するだけなので、とても簡単です。
下記のサイトよりダウンロードできます。
http://urin.github.io/jquery.tile.js/
横に並べて表示するカラムなどは高さが揃っていた方がきれいに見えると思うのおすすめです。
下記にjQueryの「jquery.tile.js」プラグインを使った時の使用方法を記載します。
■ jquery.tile.jsの使用方法
・全てのカラムの高さを揃える
【js】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>
<script type="application/javascript">
$(function(){
$('.box').tile();
});
</script>
【css】
<style type="text/css">
#main {
width: 500px;
margin: 0 auto;
}
.box {
width: 80px;
padding: 10px;
border: 1px dashed #5BAEC0;
margin: 5px;
float: left;
display: block;
}
</style>
【html】
<div id="main"> <div class="box">test</div> <div class="box">test<br>test<br>test<br>test<br>test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> </div>
【表示例】
・一行ごとの高さで揃える
【js】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>
<script type="application/javascript">
$(function(){
$('.box').tile(4);
});
</script>
【html】
<div id="main"> <div class="box">test</div> <div class="box">サンプル<br>サンプル<br>サンプル<br>サンプル<br>サンプル</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">あいうえおかきくけこさしすせそたちつてと</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> </div>
【表示例】
※画像を出力する際は、画像を読み込む前にJSが動いてしまうので下記のようにを記述します。
$(window).load(function(){
$('.box').tile();
});