SNS:Pocket(ポケット)ボタンの設置方法

WEB上の記事動画などを後で読む後で見る)ことができる「Pocket」というサービスがあります。

Pocket

Pocket_1

使用してみると読みたい記事を今すぐではなく、時間がある時にあとで読むことができるので結構便利です。

アドオンやアプリなどもあります。

最近ではブログ等で「Pocketボタンを設置しているのを見ることが多くなってきました。

そのPocketボタン設置した時の方法をご紹介します。

長い文章を書くブログなどでは、今は読めないけど後で読みたいという方がいると思うので、
ブログにPocketボタン設置しておいた方がいいと思います。

Pocketの利用者もどんどん増えてきているようなのでオススメです。


Pocket(ポケット)ボタンの設置方法

下記のURLにアクセスします。

http://getpocket.com/publisher/button

Pocket Button」作成画面が表示されるので、使用したいポケットボタンのスタイルを選択します。

Pocket_2

選択すると設置するコードが表示されるので、コードをコピーします。

Pocket_3

下記がコピーしたコードになります。

<a data-pocket-label="pocket" data-pocket-count="vertical" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

後はコピーしたコードをポケットボタンを設置したい箇所に貼り付けるだけでOKです。


WordPressで各記事に設置する場合は「data-save-url=”<?php the_permalink();?>”」を追加するようです。
下記のようにコードを変えるみたいですね。

<a data-pocket-label="pocket" data-pocket-count="vertical" data-lang="en" data-save-url="<?php the_permalink();?>"></a>

「Pocket」は本当に便利なサービスで使用する人も多いと思うので、
WordPress等のブログ運営をしている方は設置した方がいいと思います。

Javascript:セレクトボックス選択時にページ遷移する

セレクトボックスの値を変更した時に、選択した項目によって別のページ遷移リンク)させたい場合があります。

Javascriptを使用すれば簡単にページ遷移させることが可能です。

JavaScriptonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。

JavaScriptでページ遷移する方法は「location.href」を使用します。
以前に「location.href」の説明を記述しました。下記に記載しています。

Javascript:locationオブジェクトでURL情報を取得する

セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。

下記に例を記述します。


セレクトボックス選択時にページ遷移

onChangeはフォームの入力・選択値が変更された時に処理を行うイベントです。

セレクトボックスに「onChange=”location.href=value;”」を記述します。
optionタグのvalue値に遷移させるURLを指定します。

<select onChange="location.href=value;">
    <option value="">---------</option>
    <option value="sample1.html">サンプル1</option>
    <option value="sample2.html">サンプル2</option>
    <option value="http://www.google.co.jp/">Google</option>
    <option value="http://www.yahoo.co.jp/">Yahoo!</option>
</select>

セレクトボックスの値を変更すると、選択した値のURLに遷移することができます。


たまに使いたい時があるのでメモしておきます。

Fuelphp:エスケープしないでSQLを実行する「DB::expr()」

Fuelphpでデータベースの値を操作する場合は、DBクラスを使用します。

そのDBクラスを使用してデータを取得すると、自動でエスケープ処理をかけてくれます。
しかし、状況によってはエスケープしないでデータを取得したい場合があります。

DB::expr()メソッドを使用すればエスケープ処理しないで実行することができます。

MySQLの関数で「COUNT()」「SUM()」「RAND()」などを使用したい場合や
サブクエリを使用してデータ取得する場合などに非常に便利です。

下記に、Fuelphpの「DB::expr()メソッドを使用してデータを取得した時の方法をメモします。


expr()メソッド

エスケープ処理をしないで実行することができます。

DB::expr('クエリ文字列')

「DB::expr()」の実行例(MySQL関数を使用した場合)

・「COUNT()」関数を使用して行数を取得する場合

$query = \DB::select(\DB::expr('COUNT(*) AS cnt'))->from('user');
$result = $query->execute()->as_array();

実行したSQL文

SELECT COUNT(*) AS cnt FROM `user`

・「SUM()」関数を使用して合計値を取得する場合

$query = \DB::select(\DB::expr('SUM(point) AS total'))->from('user');
$result = $query->execute()->as_array();

実行したSQL文

SELECT SUM(point) AS total FROM `user`

・「RAND()」関数を使用してデータをランダムに取得する場合

$query = \DB::select()->from('user');
$query->order_by(\DB::expr('RAND()'));
$result = $query->execute()->as_array();

実行したSQL文

SELECT * FROM `user` ORDER BY RAND()

「DB::expr()」を使用すると上記のようなMySQLの関数を使用することができます。

以前はデータを取得した後にPHPで件数や合計値などを計算してました。
「DB::expr()」を使用するとSQL側で計算等ができるのでとても便利です。

他にも複雑なSQL文を実行する時など色々な使い方ができそうです。

しかし、エスケープ処理がされないので入力した値などを使用してデータを処理する場合は注意です。
その際は「DB::escape()」メソッドでエスケープするなどの処理が必要になります。

Fuelphp:selectメソッドで別名(エイリアス)を付けたデータ取得

FuelphpDBクラスselectメソッドを使ってデータを取得する時に、
フィールド別名エイリアス)を付けてデータを取得する方法をメモします。

複数のテーブルをJOINしてデータを取得するとフィールド名が重複してしまうことがあります。
その際は、重複したフィールド名に別名(エイリアス)を付けてデータを取得すると思います。

SELECT文を実行する時に「AS句」を使用すればフィールド名に別名を付けることができます。

SQL文をそのまま記述してもいいのですが、Fuelphpの「DB::select」で
別名を付けてデータを取得する方法がありました。

下記にそのフィールド名に別名を付けた時の方法を記述します。


別名(エイリアス)を付けたデータ取得

「DB::select」のフィールド名の指定の箇所に
配列で指定すると別名を付けることができます。

下記のように配列を指定します。

DB::select(array('列名', '別名'))->from('テーブル名')

使用方法

エイリアスを指定したい列は配列で指定します。

$query = DB::select('id', array('name', 'user_name'))->from('user');
$result = $query->execute()->as_array();

実行されるSQL文

SELECT `id`, `name` AS `user_name` FROM `user`

・JOINを使用する場合

$query = DB::select('user.id', array('user.name', 'user_name'), array('group.name', 'group_name'))->from('user');
$query->join('group', 'LEFT');
$query->on('user.group_id', '=', 'group.id');
$result = $query->execute()->as_array();

実行されるSQL文

SELECT `user`.`id`, `user`.`name` AS `user_name`, `group`.`name` AS `group_name` FROM `user` LEFT JOIN `group` ON (`user`.`group_id` = `group`.`id`)

Chrome:ブラウザ上の選択した範囲をピクセルで表示するアドオン「MeasureIt!」

Chromeブラウザ上で選択(ドラッグ)した範囲の横幅縦幅サイズ
ピクセルで表示させることができるアドオンMeasureIt!」をご紹介します。

MeasureIt!

Chrome_MeasureIt_1

WEBサイトのデザインやコーディングをしていると画像や要素のサイズがどのくらいなのか調べたい時があります。

ブラウザに表示されている画像などの大体のサイズを計測したい時に「MeasureIt!」を使用すると
範囲を選択するだけで縦・横のサイズがピクセルで表示されるのでとても便利です。

サイト制作の作業効率も上がると思います。

下記にChrome拡張機能MeasureIt!」を追加し、使用した時の方法をメモします。


「MeasureIt!」の使用方法

1.下記URLにアクセスします。

MeasureIt!

2.「+ 無料」ボタンをクリックし、「MeasureIt!」をChromeに追加します。

Chrome_MeasureIt_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

Chrome_MeasureIt_3

4.追加するとヘッダーメニューに「MeasureIt!」のアイコンが表示されます。

Chrome_MeasureIt_4

5.アイコンをクリックすると選択できる状態になるので、測りたい箇所をドラッグします。

ドラッグすると右側に選択した範囲の縦幅・横幅のサイズが表示されます。

Chrome_MeasureIt_5

再度、アイコンをクリックすれば通常の画面に戻ります。


アイコンをクリックしドラックするだけで、ピクセル単位でサイズを簡単に計測できるのでオススメなアドオンです。
「ここのサイズどのくらいだろう?」
みたいな感じでざっくりと測りたい時に活用できると思います。

参考サイトを調べたりする場合なども便利ですね。