2016-05-11

Composer でインストールができない!(短文)

composer であるパッケージをインストールしようとしたら次のようなエラーが出てしまいました。
Your configuration does not allow connections to http://packagist.jp/packages.json. See https://getcomposer.org/doc/06-config.md#secure-http for details.
うむむ、、、どうやら私の設定では接続できないよと言っているようです。
そんな設定してないのに、、、?

仕方がないので言われたとおりURLをチェックしてみることに

https://getcomposer.org/doc/06-config.md#secure-http for details

説明としては、

secure-http の項目はデフォルトで「true」。そして、この項目が true だったら https の通信しか許可しないよ、ということらしいです。

ということは、 composer がデフォルトでセキュア対応したということなんですね。
そこで、composer.json に以下のように secure-http を false にしてインストールを実行すると今まで通りうまくいきました。

"config": {
    "secure-http": false
},

ちなみにsecure-httpの項目の最後には 以前の記事 で紹介した Let's Encryp でセキュア対応した方がいいよと書いてあります。
世のウェブページのセキュア対応がどんどんすすんでいることが今回の件からもわかりますね。

というか、Packagistがまだ https に対応してないのですかね?



2016-05-08

target="_blank"は脆弱性!?【デモページあり】

ふとRedditのWebdev板を見ていたら、ウェブセキュリティについて少し興味深い記事があったのでシェアしたいと思います。

記事のタイトルは「Target=”_blank” — the most underestimated vulnerability ever」。
日本語でいうと「target="_blank" は最も過小評価されている脆弱性」というところでしょうか。

では、順を追って少しずつ見て行きましょう。



【まず target="_blank"  とは?】

target="_blank" は他のページへのリンクに利用されるもので、簡単にいうと「新しいタブとかでページで開いてね」という命令です。

例: Yahoo!

HTMLタグでいうとこうなっています。

<a href="http://yahoo.co.jp/" target="_blank">Yahoo!</a> 
 
つまり、target="_blank" 自体は特殊なものではありません。


【では問題が起こるのはどんな時か?】

JavaScriptが利用できる場合です。
ということは、、、?
そうです。
この世に存在するほとんどのブラウザがJavaScriptには対応していますのでほぼ誰にでもありうる話です。


【実際のJavaScriptコードは?】

新しく開く側にたった一行コードを加えるだけでできます。
実際のコードは以下です。(もちろん悪用は厳禁ですよ!)

window.opener.location = 'http://www.yahoo.co.jp/';

これはどういう命令かというと、「元のページを移動させろ」というものです。

つまり、

1.ページAでリンクをクリック
2.ページBが表示される
3.と同時にページAが勝手に違うページに変更されてしまう。

以下にデモページを用意したので下のリンク(画像)をクリックしてみてください。
このページが勝手にYahooに移動されると思います。
(もちろんデモページですので、実際にはセキュリティ上何の問題もありません)



【勝手にページを変更されてしまうことの何が問題なのか?】

冒頭で紹介した記事ではその手口について下のようなストーリーを用意しています。
  1. まず可愛い猫など誰でも見たくなるようなページをフェイスブックでシェアする。
  2. シェアしたリンクがクリックされたら、さっきの例のように元ページをフェイスブックそっくりのニセページへ(ユーザーが気づかないうちに)強制移動させる
  3. 移動先には「フェイスブックからログアウトしました。もう一度パスワードを入力してください」などと書かれていてユーザーにパスワードを入力させる(←もちろんこれはフェイスブックとは何の関係もないフェイクサイトです。)
というものです。


【では防ぐ手立てはあるのか?】

記事の中では、リンクに以下を含めておくといいと書かれています。

rel="noopener noreferrer"

つまり、HTMLタグでいうと、

<a href="" target="_blank" rel="noopener noreferrer">リンク</a>

となります。

では、以下のリンクをクリックしてみてください。
今回は勝手にページを移動されることはありません。




いかがでしたでしょうか。
ケースとしては少ないかもしれませんが、よりシンプルに他人のパスワードを盗み取るテクニックであることは間違いありません。

以上、今回はセキュリティについての興味深い記事をシェアしてみました。
皆さんの参考になれば幸いです。



codeceptionでseleniumを使う方法

以前「PHPの自動テストcodeception【実行サンプルDL可】」 で紹介した codeception がとても便利で最近の開発ではよく利用しています。
ただ、上記の記事でも書いたとおりJavaScriptで生成した入力ボックスなどには対応ができないため、今回は自動でブラウザ操作を行ってくれる「Selenium」をインストールして JavaScriptを含んだページのテストにも対応できるようにする方法をお届けしたいと思います。




【開発環境】

Ubuntu 14.04


【インストール】

まずはSeleniumのインストール。
以下からダウンロードできます。(Selenium Standalone Serverという場所です)
↓↓↓

Selenium - Web Browser Automation

※この記事を作成している時点では 2.53.0 が最新バージョンでした。私の開発環境Ubuntuで apt-get でインストールすると古いバージョンがインストールされてしまうので注意してください。古いものは最新のFireFoxに対応していないらしくうまくいきませんでした。

では、ファイルをダウンロードしたら適当なフォルダに保存して、

java -jar selenium-server-standalone-2.xx.xxx.jar

をコマンドから実行すれば起動します。

※もし実行できない場合は起動するためのパッケージが足りていない可能性があります。必要なパッケージは、こちら が参考になると思います。


【Codeceptionの設定】

ではCodeceptionの設定ファイルを変更しましょう。

(tests/acceptance.suite.yml)

modules:
   enabled:
      - WebDriver:
         url: 'http://localhost/'
         browser: firefox


はい。
これで完了です。
後はいつものように、

codecept run

を実行すれば自動でFireFoxが起動し、入力やデータ送信を全て行ってくれます。
(もし、エラーが出た場合は tests/_output/ にスクリーンショットやHTMLが作成されますのでどこが間違っているかを楽にチェックできますよ)

以上、短いですけど Codeception + Selenium の使い方でした。


【使ってみた感想】

Seleniumの存在を知ってはいたのですがなんだか小難しいイメージが先行してなかなか実行に移せないでいましたが、JavaScriptを含んだページのチェックもできますし、何より実際のブラウザを使っているというのはテスト結果にも安心感がもてます。

ただ、一点だけ問題があるとすればそれはやはり「実行スピード」ですね。
元々は PHPBrowser を使ってテストをしていたのでスピードは全く気にならないものでしたが、Seleniumにした途端「このテスト実行早く終わらないかなー」と待たされる時間が増えました。
ブラウザを起動するなどするので仕方ないですが、このあたりは一長一短ってとこですね。


なお、実は当初は PhantomJS を使ってテストを行っていたのですが、JavaScriptで生成する入力タグがあるとどうもセレクタの指定でうまく行かなかったため、途中で断念してSeleniumを採用することにした経緯があります。
ちなみにこちらの方はそこまでスピードが遅いという印象はなかったので、今後機会があればまたPhantomJSにも挑戦してみたいと思います。

ではでは〜!


(GWで少し不摂生しすぎたかも。。。タバコはすでにやめてますが ^-^)

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なんかは現在は黒をベースにしているようです。アイコンの色からきてるのか、昔はホントにこんなショッキングピンクだったのでしょうか!?)

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

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