2016-05-25

【無料】サイトが落ちていないか監視

サイトの運営を行っている人間からすると一番怖いのは「サイトが落ちる」こと、つまり訪問者がアクセスしてもページにエラーが出て表示がきちんとできていない状態です。

こうなってしまうと、もんろん訪問者は(もしかすると舌打ちしながら)すぐに違うページへ移動してしまいほぼ二度とはやってくることはないと思います。

そのためサイトが落ちていないかどうかは定期的にチェックをするべきですが、さすがに毎日毎日となるとなかなか面倒なもの。

そこで、そういう時にはサイト監視サービスを使ってみましょう。
インターネット上には制限こそあるものの無料でも利用できる監視サービスが幾つか存在しているので、その中から一つをご紹介したいと思います。

名前は「Uptime Robot」です。

まずは以下が3つの特徴になります。
  • 最短5分ごとにサイトをチェックできる
  • https でのアクセスも可能(他のサービスでは有料のところもあります)
  • 無料でも使える(最大50ページまで監視が可能)
では登録と設定方法を見ていきましょう。


【ユーザー登録】

まず、ユーザー登録ページ へアクセスしユーザー登録します。


上から、
  1. 氏名
  2. メールアドレス
  3. パスワード
になります。

入力して「Sign-up」をクリックすると入力したメールアドレスに本登録用のURLが書かれた以下のようなメールが届くのでこれ(clicking hereの部分)をクリックしてください。


これでユーザー登録は完了です。


【設定】

では、早速ログインページからログインしたら、まずは設定をしましょう。
ページ上部にある「My Settings」をクリック。


1.タイムゾーン

ページ中程にあるタイムゾーンを東京へ変更しUpdateをクリック。


 ※もしサイトからのお知らせメールが必要ない場合は「Inform me about new features and updates (no more than twice a month).」のチェックを外しておきましょう。

また、通知を受け取りたいメールアドレスが他にもある場合は以下を参考にして追加しておきましょう。

2.通知先メールアドレスの追加

「Add Alert Contact」 をクリック。 

 以下のようなダイアログが表示されるので
  1. Alert Contact Type を E-mail に設定
  2. Friendly Name は区別しやすい好きな名前を入力
  3. E-mail に通知先メールアドレスを追加
  4. Create Alert Contactを クリック


【監視サイトの追加】 

 ホーム画面に戻って「+ Monitor」をクリック。


 以下のようなダイアログが表示されるので監視したいサイトの各種データを入力します。


  1. Monitor Type ・・・ HTTP(s)を選択
  2. Friendly Name ・・・ 区別しやすい名前
  3. URL (or IP) ・・・ 監視したいページのURL
  4. Monitoring Interval ・・・ 何分毎にページをチェックしたいか?
  5. (任意)Authentication Settings ・・・ おそらくページ監視時に送信するデータがある場合に利用できるものだと思いますが、通常は必要ないでしょう。
 (通知先メールアドレス)

 あとは通知したいメールアドレスにチェックを入れて「Create Monitor」をクリックすれば完了です。
もし他にも登録したいURLがある場合は同じ作業を繰り返し行ってください。

もしサイトが落ちていたら通知がきますし、ホーム画面で統計データを見ることができます。

以上、サイト監視ができる Uptime Robot の紹介でした。
皆さんもぜひ一度試してみてください。

私がフェイスブック・アプリを削除した理由と対処

私は2012年からフェイスブックを利用しています。始めたころ私はカナダのバンクーバーに語学留学中で、初めて登校したとき先生から「友達とやりとりするようになるから(英文を書く習慣がつくから)絶対登録しなさい」と言われ半ば嫌々登録したのを覚えている。

まだその頃は周りではミクシィをやっている人が多く、フェイスブックをやってるよ、という人はまだ少なかった。

それがあれよあれよという間にフェイスブックの知名度が日本でも高くなり、そのうちミクシィよりもフェイスブックのアプリを開く時間の方が多くなってしまった。(私の場合、帰国後もカナダで会った友達のニュースを仕入れるにはフェイスブックに頼るしかなかったというのも大きな理由の一つだ)

ちなみに私は今でも1〜2日ぐらいの頻度でフェイスブックをチェックする。

ただ、それでもフェイスブックのアプリはこの度アンインストールしてしまった。

理由は2つ。

まず、あまりハイスペックとはいえない私のスマートフォンではフェイスブックのアプリをアップデートする際はとても時間がかかり、また不具合なのかもしれないがアップデートこの後は再起動をしなければいけない場合もあった。

しかも幸か不幸かフェイスブックの開発スタッフはとても熱心で、ことあるごとにアプリをアップデートしてくれるからやっかいだった。

さすがにもう毎回作業するのが面倒になり、自動でアップデートしない設定にもしてみたが結局はこの理由が大きく、アプリを削除してしまった。

そして、もう一つの理由はバッテリーの消費だ。

以下の記事だとフェイスブック・アプリによって電池消耗が20%も増えると書かれてある。


携帯式バッテリーは過去に持っていたが紛失して以降全く使っていない私にとってはこれも都合が悪いものとなってしまった。

【アプリ削除後の対処】

では、今でもフェイスブックを開く私がとった対処とはなんだったのか?

もうお気づきかもしれないが、そう、PCと同じくスマートフォンのブラウザでログインすることにしたのだ。

こう書くと「いちいちブラウザを開いてフェイスブックを検索し、さらにログイン情報まで入力するのは面倒すぎる」という意見があるのかもしれない。そのとおりだと思う。

なので、この問題を以下のようなテクニックで対処した。

  1. まず初めてブラウザでフェイスブックにログインする場合にパスワードを保存するかと聞かれると思うのでこれを保存する。(以降、ログインする必要はなくなる)
  2.  ログインしたらブラウザのメニューの中からホームスクリーンにショートカットを作成する。
これで今までのアプリと同じようにアイコンをタップするだけでフェイスブックにログインした状態でブラウザがURLを開いてくれるというわけだ。

では、使用感はどうか。
残念ながらやはりネイティブアプリの方が動きはスムーズだ。フェイスブックがその昔HTML5を利用したアプリ開発をやめた理由がよくわかる。

ただし、とは言ってもブラウザの方も進化していることは確かで、そこまでイライラさせられることがないというのも事実だ。私のようなライトなフェイスブックユーザーであればなんの問題もないかと思う。

さらにこれはまだ未確認だが、私が使っているChromeは現在プッシュ通知にも対応しているそうなのでもしかしたら「今日はお友達のお誕生日ですよ」などと通知をしてくれるのかもしれない。
ということで、フェイスブックはまだもう少し続けそうだが、アプリの方はもう使わないようになりそうだ。

と、いっても最近は世界中の友達もフェイスブック自体をやらなくなってきているし、私自身が最後にフェイスブックに投稿したのももう半年ほど前になる。

だからといって、Lineのタイムラインに移行するつもりもないのでそのうち本格的にSNSは卒業するかもしれない。

今後SNSがなくなることはないだろうが、一時期ブームになったのはやはりそういう時代だったから、というのが私のSNSに対するものの捉え方だ。

2016-05-24

n倍でループ【PHP】

PHPに限らずプログラムで開発をするよく使うものの一つに for() ループがあると思います。
今回はいつもとは少し変わったループの仕方を紹介したいと思います。

通常でしたら、以下のように $i++ インクリメントを使って1ずつ変数を追加していくパターンを使うかと思います。
for($i = 0 ; $i < $count ; $i++) {
    // ここで何かの処理
}

もしくは逆に $i-- を使って変数を減らしていく方法もたまに使うのではないでしょうか。
for($i = 5 ; $i > 0 ; $i--) {
    // ここで何かの処理
}

では、今回は for() ループを nの倍数ずつループさせる方法はどうなるでしょうか。
いろいろな方法があると思いますが、ひとつの答えとしては以下のようなものもあります。
$n = 3;
$count = 15;

for ($i = 0; $i < $count; $i+=$n) {
   echo $i ."\n";
}

実行結果としては、以下になります。
0
3
6
9
12
ではひとつずつ中身を見て行きましょう。


$n = 3
これは何倍ずつループするかです。
つまりループを3、6、9...という形にしたい場合は「3」になります。

$count = 15;
最大値はいくらかになります。
つまり、もし15を含めたい場合は $count = 16; に変更するか
for() 内の $i < $count$i <= $count へ変更する必要があります。

ここまでは通常の for() ループを同じですね。
では次。

for ($i = 0; $i < $count; $i+=$n) {}
  1. $i = 0 ・・・初期値が0
  2. $i < $count ・・・ 最大値
  3. $i+=$n ループのたびに倍数を追加
ここが今回の特徴的な部分です。 
$i++ の代わりに $i+=3 を使ってループ内の変数を倍数にしています。

はい。
短いですが、以上解説でした。


【終わりに】
通常はあまりこのようなループを使うことは無いでしょうし、だとすると「正直可読性悪いんじゃ、、、?」と言われると確かにそのとおりですが、これもひとつのアイデアなのかなと思い紹介してみました。(もしかすると結構使われてるのかな?)

今回は以上です。




2016-05-19

開発者のブラウザ「Blisk」を使ってみた感想

ウェブ開発をしていて時々必要となってくる要件にPC、モバイルともに対応可能な「レスポンシブ・デザイン」というものが増えてきました。現在はPCが家になく、スマホだけ持っているという人も多くいるため、「モバイル・ファースト」に主眼をおいておられるクライアント様も多くいらっしゃいます。

そこで、今回紹介するのは「Blisk」というブラウザです。
このBliskは「開発者のためのブラウザ」 と銘打っているだけあって、ひとつの画面の中でスマートフォンやタブレットの画面を確認することができるとのことでした。
忙しい時期ですが、業務の効率化を考えて時間を割いて少し体験してみました。


【ブラウザの外観】


必要なものだけが用意されている印象です。余計なものは必要ではない開発者としてはありがたいと思いました。
ちなみに左側からスマートフォンやタブレットを選択するとすぐに画面が切り替わります。
また、左側のエミュレーター部分ではマウスは黒丸に変更されタップやスワイプの動作となります


【操作感】

エミュレーターでよくある表示が遅くなることやひっかかりを感じることはほぼありませんでした。
(私の場合はVirtualBoxで実行したので通常のWindowsでしたらまた違っているかもしれません)

ただ、サイトによっては違うのかもしれませんが、スライダーなどの横スワイプが効かなったことが残念でした。
また、モバイル対応していないページでは通常のブラウザとして利用できるのは好感がもてました。
別のブラウザを開いて検索する必要はありませんので。

もちろん開発者ツールも使えます。



【設定できるスマートフォン/タブレット機種】
  • IPhone 4
  • IPhone 5
  • IPhone 6
  • IPhone 6 Plus
  • Nokia N9
  • Galaxy S3
  • Galaxy S4
  • Nexus 4
  • Nexus 6
  • Nexus 7
  • Nexus 10
  • IPad mini
  • IPad Air Retina
これだけそろっていれば必要なものは揃っているのではないでしょうか。


【今後の開発予定】

これが少し楽しみですが、どうやら以下のように画面のビデオ録画機能を予定しているようです。



 【実行環境】

現在までのところ windows のみしかありませんがMac、Linux版も予定しているようです。


【Bliskを使ってみて】

全体的に使いやすくていいソフトだなと思いました。
モバイル主体の開発があれば利用してみてもいいかなという感じですが、今のところ windows版のみとのことでしたので、私のLinuxの開発環境だといちいち VirtualBox を開かなくてはいけません。私にとってはここがネックになってきそうです。

とりあえずのところはキープですかね。
ではでは〜(^^)



2016-05-14

wp-cli をさくらのVPSにインストール

以前よりここのブログとはまた別テーマの新ブログを開始しようと考えていたため、wordpressを以前から利用しているさくらのVPSへインストールしてみました。
早速ログインしてみるとプラグインを更新しろとのメッセージを発見したので実行しようとすると、FTP(or STFP)の情報が必要だとのことでした。

ただ、私のサーバーはセキュリティ上の理由からFTPは使っておらず、SFTPも公開鍵ファイルでログインする形になっています。。

途方にくれていたところターミナルから実行できる wordpress のクライアントバージョン「wp-cli」というものが存在するということだったので早速インストールしてみました。
本記事はそのインストール手順と主要なコマンドのまとめになります。



【サーバー環境】
さくらのVPS(CentOS 6.7)


【インストール手順】
インストールといっても実際はファイルをダウンロードして権限を設定し、適当な場所に設置するだけです。
実際には以下になります。


1. wp-cli をダウンロード
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
※curlコマンドが利用できない場合は先にインストールが必要です。


2.権限の設定
chmod +x wp-cli.phar
※環境によっては sudo が必要かもしれません。


3.パスが通っているフォルダへ移動
sudo mv wp-cli.phar /usr/local/bin/wp
※環境によって、/usr/local/bin/ の部分を変更してください。


はい!
これで wp *** というコマンドが利用可能になっているはずです。
まずは以下のコマンドを実行してインフォメーションを見てみましょう。
バージョン情報などが表示されるはずです。
wp --info


【主要なコマンド】

1.wordpress本体のアップデート
wp core update

2.(全ての)プラグインのアップデート
wp plugin update --all

3.テーマのインストール
wp theme install "wp castle"

その他のコマンドは こちら をご覧ください。
そのうち、時間ができたらもっと多くのコマンドをまとめてみたいと思います。

ではでは。

2016-05-11

PHPで休日を管理するなら yasumi【サンプルあり】

ウェブサイトの開発を進めているとたまに必要となってくるものに「祝日、休日の取り扱い」があります。
祝日・休日は結構厄介で、最近で言うと「山の日」など新たに制定されたり、突然名前が変わってしまう場合もあるため、これまでは Google Calendar APIから取得をするというのが定石だったかと思います。

ただ、GoogleのAPIは変更が大きく、また廃止されてしまうものも少なくないため最近は極力は使用しないようにしています。

そこで、何か別のアプローチ方法はないかと考えていたところ、とても便利なパッケージを発見したので試してみました。

その名は「Yasumi」です。(←開発者は日本の方っぽいです)
世界各国の言語での翻訳にも対応しているようなので、もちろん日本語の祝日・休日の名前も取得できますよ。


【インストール】
composer を使ってインストールできます。
composer require azuyalabs/yasumi

【使い方】
使い方はとても簡単で、Yasumi::create() の引数に
  1. どこの国の祝日・休日を取得するか
  2. 取得したい祝日・休日は西暦何年か
  3. (オプション)翻訳する言語はどこか
を設定するだけで1年間の全祝日・休日を取得することができます。

use Yasumi\Yasumi;

$holidays = Yasumi::create('Japan', 2016, 'ja_JP');

foreach ($holidays as $holiday) {

   echo $holiday->format('Y-m-d') .': '. $holiday->getName() .'<br>';

}

【サンプル】


ちなみにこのパッケージも将来的にサポートされなくなってしまう可能性はありますがMITライセンスでの公開ですし、この記事を書いている時点で240ものスターがついているのでおそらくGoogle のAPIを利用するよりは安定性は高いと考えています。

いざとなったらPull Request やフォークして使えますしね。

ではでは、今回は以上です。


(休みほしい...笑)



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で少し不摂生しすぎたかも。。。タバコはすでにやめてますが ^-^)