2016-04-24

新ブラウザ Vivaldi を使ってみた感想

今月の頭にニュースで元opera のCEOが開発した新ブラウザ vivaldi が正式にリリースしたことを知り、少し気になっていたので私の開発環境に合わせて Linux版を試してみました。

まだほとんど少ししか使っていないので vivaldi のホントに魅力が見えてはいないとは思いますが、現時点での雑感をまとめて見ましたのでぜひ参考にしてください。




【vivaldiを試してみた理由】

よりよい開発環境を整えるため。もしウェブ制作や検索効率が上がりそうなら乗り換えてもいいかな、と考えていました。


【見た目と表示速度】

以下がこのブログのトップページを vivaldi で表示したスクリーンショットになります。
背景が黒いのは私の好みで、vivaldi をインストールして初めて起動すると背景色や背景画像をいくつか用意された中から選択することができました。
また、バーの位置も選択できるようでしたが、やはり慣れてることもあってデフォルトの画面上に表示するパターンを選択しました。

デザインとしては個人的には好きですね。
スタイリッシュな雰囲気ですし、タブなどの切り替えもとてもスムーズでした。




なお、表示速度についてですが、残念ながら正直そこまで早いとは思いませんでした。(←アップデートがあってから少し早くなったように気がします^^)
きちんとベンチマークをとれば違うのかもしれませんが、体感速度としては「ちょっとだけ読み込みが遅いな」というページもたまにありました。

拡張機能は全くインストールしていない状態でこの速度だったので少しがっかりです。

また、検索はアドレスバーと検索バーどちらともから実行できますが、アドレスバーで検索した場合は自動的に Bing での検索となりましたので、「いや、できれば Google で、、、」思いました。(←変更できるのかな?) ←設定から簡単に変更できます。お騒がせしました。

【クイックコマンド】

vivaldi の特徴として「クイックコマンド」というものがあります。
これは、コマンドウィンドウからブラウザの全てをコントロールできるものだそうです。
この発想は開発者としてはとても「それはいいね!」と思いました。

ただ、一点問題が、、、

それはクイックコマンドを呼び出すキーが「F2」だということです。
他の人はどうかわかりませんが、指が短い私の場合、ファンクションキーをブラインドタッチで一発タイプするのは正直難しいのです。

「F2を押すぞ!」 と思ってもF3を押してしまったり、指が届かず数字を押してしまったりするので、できれば phpstorm の Searching Everywhere のように Shiftボタン2回連続押しとかで起動できれば最高でした。

ただ、アイデアはとても好きですね。




【マウスジェスチャ】

以前「私がウェブ開発で行っている「時短」テクニック【全9件】」で書いたように、作業効率を上げるためにデスクトップ環境でさえマウスジェスチャを使っています。
(個人的には便利なのになぜみんな使わないのだろう、とすら感じています。)

そこへ行くと、vivaldi はデフォルトでマウスジェスチャがついているということだったので早速使ってみました。
動作、反応速度としてはとてもスムーズです。
やはりデフォルトでマウスジェスチャを搭載しているだけあって最適なプログラムになっているのでしょうか。

ただ、ここも一点だけ残念な、しかも致命的な部分がありました。それは、、、

マウスジェスチャの動作が少なすぎる

ということです。
つまり、他にもやりたい動作があるのにそれが存在せず、しかも追加ができないようでした。
なので開発効率を大事にしたい私にとってはこの部分が一番がっかりしてしまいました。




【開発環境として利用するかどうか?】

正直まだ発展途上なのかな、と感じました。
とてもコンセプトはいいですし、chrome 一極集中化しているブラウザ戦争に新しい選択肢が増えるのはいいことだと思うので今後に期待したいと思いますが、現時点で開発環境とするには足りない部分が多いかなというのが素直な気持ちです。


ただ、私が利用したのは Linux版ですので、もしかするとwindows版では違っているのかもしれません。
もし興味がありましたらぜひ試してみてはいかがでしょうか。
↓↓↓

友人たちのための新しいブラウザ – Vivaldi



ではでは。(ライトにクラシックが好きな私からすると vivaldi というネーミングも好きですよ^^)




2016-04-23

Laravel で独自コマンドを作成する方法

Laravelは本当に利用がしやすく誰にでもおすすめができるのですが、その理由のひとつ
として「自分の好きなコマンドを独自に作成することができる」というものが挙げられるかと思います。

コマンド。
そう、あまり windows ユーザーの方は馴染みがないかもしれませんが、cron が利用して定期的にプログラムを起動するといった用途に使えるととても便利な機能です。

※たしか windows 10 で Ubuntu が使えるようになる(った?)のでこれからはコマンドも windows ユーザーには馴染みのあるものに成るかもしれませんね。


ということで、今回はLaravel 5 を例に独自コマンドを作成する方法をご紹介したいと思います。




【準備】

では、まずターミナルを開いてLaravelがインストールしてあるフォルダまで移動してください。
そして、独自コマンドから起動するPHPファイルを作成します。
以下のコマンドを打ち込んで実行してください。
(TestCommandの部分はお好きな名前が使えます。)

php artisan make:console TestCommand

実行すると「Console command created successfully.」というメッセージが出て以下にひな形のファイルが自動で作成されています。
 app/Console/TestCommand.php

【コマンドファイルの作成】

ファイルを開くと「TestCommand」というクラスが書かれていて、中にいくつかのメンバ変数やメソッドなどが書かれていると思います。

ここで変更する点は以下の3点です。

  1. $signature
  2. $description
  3. handle()

ではひとつずつ見て行きましょう。

1.$signature

$signature は実際にどんなコマンドを使いたいかを設定します。
例えば、E-Mail を定期的に送信するプログラムを起動したい場合は以下のようにすればいいでしょう。

protected $signature = 'cron:email';

コロン「:」をつけておくとコマンドの一覧を確認する際に大ジャンル、少ジャンルのようにリスト表示してくれて見やすいので付けられる場合はぜひつけておきましょう。

cron
  cron:email
  cron:test
db
  db:seed

はい。
これでコマンド「php artisan cron:email」というコマンドが利用できるようになります。(実際には登録がまだなので実行はできません。もし先に登録したい場合は一番最後の項目「コマンドの登録」へ移動してください。)


2.$description

$description はそのままでコマンドの説明分です。
後で「あれ?どんなコマンドだったっけ?」なんてこともたまにはあるので、ぜひ登録しておきましょう。説明文はコマンド一覧から読むことができます。

protected $description = 'Send email to users';


3.handle()

public function handle(){  } の中にはコマンド実行した時に呼ばれるプログラムになります。
つまり心臓部分ですね。
メールを送信する、データをスクレイピングしてとってくるなどお好きな使い方をしてください。


なお、もしかするとコマンドに値を渡したい場合があるかもしれません。
例えば、

  • メールを最大10件だけ送信したい
  • 日本人ユーザーだけにメールを送信したい

そんな場合は 「argument」と「option」が利用できます。
まずは argument から。

例えばこんなカンジでコマンドを利用したい場合です。

(10件だけ送信) 
php artisan cron:email 10

$signature に

protected $signature = 'cron:test {count}';

と、{オプション名}をつけるだけでhandle()内で以下のように値を受け取れます。

$count = $this->argument('count');

ただし、この場合は必ず引数を指定しないとエラーが発生します。
もし値を任意にしたい場合は、以下のように?をつけるといいでしょう。

protected $signature = 'cron:test {count?}';

また、デフォルト値を指定したい場合はこうなります。

protected $signature = 'cron:test {count=50}';


では、次に「option」です。
option も先ほどと似ていて、基本の形はこうなります。

protected $signature = 'cron:test {--country}'


ただし、この場合は「値をとらない場合」になります。
つまり、

php artisan cron:test --country=japan

という形では利用できず、

php artisan cron:test --country

という形で、値としては true/false を受け取ることになります。
ですので、使い方としては以下のような形がいいでしょう。

if($this->option('country')) {
   echo 'Yes!';
}


では、値を渡したい場合はというと、「=」をつけて上げることで実現できます。

protected $signature = 'cron:test {--country=}';

値は、

echo $this->option('country');

として受けることができます。

同じくデフォルト値が必要な場合は

protected $signature = 'cron:test {--country=canada}';

とします。


コマンドの登録

では、最後に作成したコマンドを実際に使えるよう登録しましょう。
変更するファイルは以下になります。
app/Console/Kernel.php
このファイルの中の $commands という変数へ先ほどのコマンドを追加します。

実際にはこんなカンジです。

protected $commands = [
    \App\Console\Commands\Inspire::class,
    \App\Console\Commands\TestCommand::class,
];

※一つめの値は始めから記述されているものになります。

はい。
これでコマンドラインから実行ができるようになりました。
まず、一覧に表示されているかを確認してみましょう。

php artisan

おそらく

 cron
  cron:test             Send email

という形で表示がされていると思います。

では!
実際にあなたの独自コマンドを実行してみましょう。

php artisan cron:test

handle() に書かれたプログラムが実行できるのを確認できるはずです。


なお、コマンドに文字を表示するには echo() でも問題ありませんが、以下を利用すると見やすいので一度試してみてもいいかもしれません。

  • $this->line('テキスト');
  • $this->info('テキスト');
  • $this->error('テキスト');
上から、通常のテキスト、色付きテキスト、背景が赤のテキストとなります。


と今回はLaravelの独自コマンド作成をお届けしました。
皆さんのお役にたてれば幸いです(^^)







2016-04-21

PHPで画像を扱うならinterventionが便利

PHPでの開発をしているとよく必要になってくる機能の一つに「画像のアップロード」というのがあります。
画像の送信自体は input タグの type file を利用すれば簡単に実行できるのですが、いざ送信された画像のリサイズやトリムなどをしようとするとトタンに計算やらを行う必要がでてきます。

そんな時は intervention の出番です。

intervention は直感的に画像の編集ができるようになっているのでとてもおすすめです。
ということで今日は intervention の記事をお届けしたいとおもいます。


【準備】

intervention は composer でインストールできます。
(ホントに composer は便利ですね^^)

composer require intervention/image


【使い方】

1.まずは画像を読み込みます。

intervention は様々な画像の読み込み方法が用意されていて、以下がその全てになります。

  • ローカル画像のパス
  • 画像のリソース
  • GDのリソース
  • 画像のURL
  • (Laravelの場合は)アップロードされた画像を取得するメソッド

今回は基本的な利用法として画像のパスから読み込む方法を見ていきましょう。

$img = Image::make('example.jpg');

はい。
たったこれだけで画像編集の準備が完了です。

後は、画像の大きさを変更したり様々な編集ができるわけですがここでは基本的なメソッドを紹介します。

・サイズの変更(リサイズ)


$img->resize(300, 200);

横と縦の長さを入力するだけで完了します。
もしどちらかの数値に null を指定した場合は元の長さになります。
つまり、

$img->resize(null, 200);

とした場合、元の画像の横の長さが500pxだったとすると画像のサイズは 500×200 px になります。


・クロップ(切り取り)


$img->crop(100, 100, 25, 25);

crop() は画像の一部を切り取るメソッドです。
引数は、

  1. 切り取る長さ
  2. 切り取る高さ
  3. 切り取りを開始する位置(X座標)・・・任意
  4. 切り取りを開始する位置(Y座標)・・・任意

となります。


・fit(フィット)



$img->fit(500, 360);

fix() メソッドを利用すると画像が指定したサイズいっぱいになるように自動で切り取りとリサイズを行ってくれます。
つまり、 編集後の縦横比が違っている場合は画像の縦か横が切り取られることになります。
(上のサンプル画像は横が切り取られています)


・rotate(回転)


$img->rotate(-45);

rotate() は画像を回転させるメソッドです。
数値にはマイナスも指定できます。


・text(文字を挿入)


text() を利用すると画像の中に文字を挿入することができます。テレビのテロップみたいなものですね。

$img->text('Deep code is beautiful!!', 50, 50);

引数は

  1. 挿入したい文字
  2. X座標
  3. Y座標

ちなみに日本語を利用する場合は以下のようにフォントを指定しないといけません。
また、画像の色を指定したい場合もこのようにクロージャを利用して指定します。

$img->text('ディープ・コーブの景色は感激です!', 10, 25, function($font) {
   $font->file('sazanami-gothic.ttf');
   $font->size(22);
   $font->color('#ee0000');
});


・insert(画像の挿入)

$img->insert('face.jpg');

insert() は画像の中に別の画像を挿入するメソッドです。
サンプルのように好きな位置に別の画像(上のは私の顔写真です)を重ねることができます。
画像にロゴなどを追加したい場合に利用できると思います。

もし画像の中央に挿入したい場合は

$img->insert('face.jpg', 'center');

と「center」を追加するだけでOKで、それ以外にも
  • top-left (default)
  • top
  • top-right
  • left
  • center
  • right
  • bottom-left
  • bottom
  • bottom-right
が利用できます。
また、

$img->insert('face.jpg', 'bottom-right', 10, 10);

とX、Y座標を指定するとその長さの分だけ中央に寄せることもできます。


・opacity(透明化)


$img->opacity(50);

opacity() を使うと画像を透明にすることができます。
数値が100の場合、透明にはなりません。


・save(画像の保存)

$img->save('example.jpg');

もし png や gif などで保存したい場合は「example.png」「example.gif」とすればOKです。
また、以下のようにすることで画像の質を変更することも可能です。
(100が一番質がいい状態です)

$img->save('example.jpg', 60);


・encode(画像の変換)

encode() は画像の形式を変換することができます。
また以下のようにすることで直接画像を表示させることもできます。

header('Content-Type: image/png');
echo $img->encode('png');

ちなみに利用できる画像形式は以下になります。
  • jpg
  • png
  • gif
  • tif
  • bmp
  • data-url

・iptc & exif(画像データ

iptc() と exif() は画像に埋め込まれた文字データを読み取ります。

【IPTC】

1.IPTCの全データを取得
$data = Image::make('public/foo.jpg')->iptc();
2.Copyright だけを取得
$copyright = Image::make('public/foo.jpg')->iptc('Copyright');

【EXIF】

1.EXIFの全データを取得
$data = Image::make('public/foo.jpg')->exif();
2.Model だけを取得
$name = Image::make('public/foo.jpg')->exif('Model');


・width、height、filesize(各種画像のデータ)

echo $img->width();
echo $img->height();
echo $img->filesize();

そのまま、上から

  1. 画像の横幅
  2. 画像の縦幅
  3. ファイルサイズ

を取得することができます。


ということで、今回は便利な画像編集パッケージの intervention の使い方をお届けしました。
今回は紹介できませんでしたが、 intervention には線や丸を書いたりするなど他の機能もありますので興味のある方はぜひトライしてみてください。

ではでは。


2016-04-20

海外有名サイトのメイン色をまとめてみた

開発でもよく利用しているbootstrapのテンプレートに AdminLTE というのがあるんですが、実はその中では通常のbootstrap以外の色がつかえるようになっています。

そして、その色というのがフェイスブックなど海外の有名サイトっぽくなるというものなんですが、ふとコレ実際の16進数でいうとどんな感じになるのかと気になったのでまとめてみました。


【まとめた結果】

Bitbucket#205081
Dropbox#1087DD
Facebook#3B5998
Flickr#FF0084
FourSquare #F94877
GitHub#444444
Google Plus #DD4B39
Instagram#3F729B
LinkedIn#007BB6
Tumblr#2C4762
Twitter#55ACEE
VK#587EA3



結果としては青系が多いですかね。
フェイスブックの影響が大きいのか、それとも心理学的に青は落ち着く色らしいのでサイト滞在時間が伸びたりするのでしょうか。
興味深いところです。

ちなみに今回は実際のサイトを訪問してCSSをチェックしてるわけではなくボタンのキャプチャをとってブラウザのカラーピッカー拡張で色を取得しているだけなので少し違いがあるかもしれません。
(flickrなんかは現在は黒をベースにしているようです。アイコンの色からきてるのか、昔はホントにこんなショッキングピンクだったのでしょうか!?)

ただ、これらのボタンを利用してみて感じたことは「とても見やすくその他のデザインまでよく見える」というものでした。
まったく大きさも文字も変えていないのにフェイスブック・カラーを使うと不思議と存在感と安定感を感じました。

やはりプロのデザイナーが選ぶ色っていうのはそれだけで人に影響するのかもしれません。
流石ですね(^^)


2016-04-09

パナマ文書はwordpressから流出した!?



(※追記)
2016/4/16現在、パナマ文書の流出元である法律事務所モサック・フォンセカの社員の一人がデータを盗み出したという容疑でスイス当局に逮捕されたとのニュースが報じられました。
まだ真実は分かりませんが、逮捕にまで至っている状況を考えると本記事は正しくない可能性が高いものと判断しております。削除は致しませんが読まれる場合はご注意ください。
なお、この記事で混乱をさせてしまった方々にはお詫びを申し上げます。

------------------------------------------------------------------------------------

(先に言っておきますが、wordpress本体ではないようです。)

少し前に世界中の富豪たちがタックス・ヘイブンを利用して節税対策をしていたとされるデータが公表され、結果としてアイスランド首相が辞任することになった、いわゆる「パナマ文書」。

このデータが流出した原因がもしかするとwordpressのプラグインがもつ脆弱性だったのではないかとwordfenceの記事が伝えています。

記事によると脆弱性のある(あった)プラグインは「Revolution Slider」。どうやら流出元のモサック・フォンセカはクライアントがインターネットで情報を見ることができるようにウェブサイトを運営していたらしいのですが、このプラグインを使っていることでリモートからのWebサーバ操作を可能にしてしまっていたようです。

問題となったバージョンは2.1.7。記事によると、Revolution Sliderはバージョン3.0.95まではこの脆弱性が含まれているそうです。

ただ、今現在そのサイトは修正されてリモートアクセスはできなくなっているとのことですがセキュリティの難しさを感じさせられますね。

2016-04-01

PHPの自動テストcodeception【実行サンプルDL可】

開発を多数こなしていると、やはり感じるのは実行テストというのはなかなか難しいなということです。
というのも、やはりプログラムを組んだ本人はもちろんそれでうまくいくと信じてコードを書いているわけで、残念ながら基本的なバグに気がつかなかったりします。

この辺は前から懸案だったたのですが、「じゃあ自動テストは?」というと人の目でチェックしていないため完璧ではなく、しかも時間がかかり、さらにテストコードすらテストが必要になるんだろ?というのが頭にずっとあったため正直言うと敬遠してきたという経緯があります。

しかし、今回は「デバッグの効率化」という観点から現在人気があり、なおかつとてもシンプルに自動テストができる「Codeception」を体験してみました。
雑感としてはとても好感触です。
今後は納品する際にテストの結果をつけてもいいのかなと考えています。

・・・と、いうことで今回は「Codeception」のインストール〜Acceptance testの基本的な使い方をご紹介します。


【Codeceptionの実行結果サンプル】




【実行環境】
OS: Ubuntu 14.04
言語: PHP 5.6.19


【インストール】
ここではグローバルで利用ができるようにインストールする方法です。
以下のコマンドをターミナルから実行します。

sudo curl -LsS http://codeception.com/codecept.phar -o /usr/local/bin/codecept
sudo chmod a+x /usr/local/bin/codecept

はい。これで codecept コマンドが利用できるはずです。
codecept -v
を実行すると 2.1.7 がインストールされていました。
(ちなみに2016/03/31の時点で2.2 は今ベータ版だそうですので、すぐに正式版が出そうですね。)


【自動テストの開始】
ターミナルでテスト実行したいサイトのルートフォルダへ移動して以下のコマンドを実行します。
codecept bootstrap
これを実行すると、以下が作成されます。

1. codeception.yml
2. testsフォルダ


【Acceptance Test の設定】 

tests/acceptance.suite.yml ファイルを開いてトップページのURLをセットして保存します。
class_name: 
AcceptanceTester
modules:
    enabled:
        - PhpBrowser:
            url: {あなたのチェックしたいサイトのトップURL}
        - \Helper\Acceptance


【自動テストファイルの作成】

codecept generate コマンドを使って個別の自動テストシナリオを作成します。

codecept generate:cept acceptance Welcome

これは、「Welcome」という名前のAcceptance Test(受け入れテスト)をするファイルを作成するという意味になります。
そして、実行後は以下にファイルが作成されますのでここに実際に命令を追加していくことになります。

・tests/acceptance/WelcomeCept.php


では実際の例を見てみましょう。

(実際の例)
$I = new AcceptanceTester($scenario);
$I->wantTo('フォームエラーをチェック');
$I->amOnPage('/form_error');
$I->see('フォームエラーのテスト');
$I->click('送信する');
$I->see('メールアドレスは必須です。');
 見ての通り、シンプルな英語の文法とほぼ同じなのでとても簡単に追加ができます。

1行目はお約束の文章。($Iは「私」のアイです。)
2行目「wanTo」はこのファイルで実行するテストの要約です。実行テスト自体には関係ありません。

3行目からが自動テストの本体になります。具体的には、

amOnPage(): 「/form_error」にアクセス
see(): 「フォームエラーのテスト」という文字があるか確認
click(): 「送信する」ボタンをクリック
see: 「メールアドレスは必須です。」という文字があるか確認

となります。
つまり、チェックの流れとしては、

1. わざとメールアドレスを入力せずに
2. 送信ボタンをクリック
3. エラーが表示

となります。

以上、本当に基本的ですが以下にシンプルかを知ってもらいたかったのでこの辺で終了します。
他にも「DBにデータが存在してるのか?」 といったチェックもできるので興味のある人は以下からチェックしてみてください。

Codeception(英語)
Codeceptionの公式ドキュメントの日本語化(ガイドのみ)


(ちなみに)
この動画はCodeception入門者にはとてもわかり易いと思います。
ホントに便利な時代になりましたよね。



(終わりに)
ふと、クライアントにテスト結果を提出するとき英語じゃやっぱり嫌がられるのかな...?と感じました。
時間ができたら自動翻訳ページ作ってみても面白いかもしれません。
あと、JavaScriptは実行できないのでその辺は Selenium  などとも連携できるようなのでまたトライしてみたいと思います。