2016年2月1日月曜日

遅まきのHerokuデビューを無料枠でしたよ。準備編〜その1

このエントリーをはてなブックマークに追加
結構前(3年ぐらい?)からHerokuは流行ってるのは知ってたんだけど、仕事内容でいまいち関わることが無かったのでスルーしてた。
でも最近になって触るような機会とPaaSの流行りがやっと来た感があるので試してみた。もうこんな記事はちまたに出回りすぎるぐらい出ているんだけど。

ちょっと前(2015年5月)にプライス設定が見直しになってたみたいで今は無料利用での制限が色々と厳しくなってる模様。それでも開発の時やテスト的には全然使えると思う。


  • SLEEPS AFTER 30 MINS OF INACTIVITY
    • 30分稼働がないとスリープしてしまう
  • MUST SLEEP 6 HOURS IN A 24 HOUR PERIOD
    • 24時間中、6時間はスリープする必要あり
  • CUSTOM DOMAINS
    • 独自ドメインが使える
  • 512 MB RAM │ 1 web/1 worker
    • dynoと呼ばれるプロセス?コンテナ?みたいな考えのWebタイプとWorkerタイプが1つずつ使える
    • Dynos and the Dyno Managerに書いてあった

さっそくサインアップを済ませてログイン。ダッシュボードは本日時点でこんな感じ。


"PHP Get Started"を選ぶ。


StartまでのTutorialが出てきた。

Introduction

This tutorial will have you deploying a PHP app in minutes.
Hang on for a few more minutes to learn how it all works, so you can make the most out of Heroku.
The tutorial assumes that you have:
・a free Heroku account.
・PHP installed locally.
・Composer installed.

はじめにPCにHerokuを使うために"Heroku Toolbelt"なるものをインストールしなきゃならんらしい。なのでこれをダウンロードしてインストールする。Windows版しかなかったら暴れているところだが、無事Mac版も用意されていた。

Set up

In this step you will install the Heroku Toolbelt. This provides you access to the Heroku Command Line Interface (CLI), which can be used for managing and scaling your applications and add-ons. A key part of the toolbelt is the heroku local command, which can help in running your applications locally.

Once installed, you can use the heroku command from your command shell.
Log in using the email address and password you used when creating your Heroku account:

pkgをダウンロードし、インストール完了したらおもむろにTerminalを開いてheroku loginと打ってコマンド実行。
$ heroku login
heroku-cli: Installing Toolbelt v4... done
For more information on Toolbelt v4: https://github.com/heroku/heroku-cli
heroku-cli: Adding dependencies... done
heroku-cli: Installing core plugins... done
Enter your Heroku credentials.
Email: hogehoge@example.com
Password (typing will be hidden):
Logged in as hogehoge@example.com
$

成功したみたいだけれど、恐ろしく成功感がない。次はGitHubからサンプルソースを引っ張ってこいみたいなことが書いてあるので、適当な場所にHeroku用のフォルダを作ってそこで作業することにした。

Prepare the app

In this step, you will prepare a simple application that can be deployed.
Execute the following commands to clone the sample application:
$ git clone https://github.com/heroku/php-getting-started.git
$ cd php-getting-started
You now have a functioning git repository that contains a simple application as well as a composer.json file. Make sure you've installed Composer. Heroku uses Composer for dependency management in PHP projects, and the composer.json file indicates to Heroku that your application is written in PHP.

パッケージ管理にComposerを使っているみたい。だからComposer入れとけとか書いている。正直準備でだいぶだるい。

先にComposerをインストールする。
$ curl -sS https://getcomposer.org/installer | php
Some settings on your machine may cause stability issues with Composer.
If you encounter issues, try to change the following:

The OpenSSL library (0.9.8zc) used by PHP does not support TLSv1.2 or TLSv1.1.
If possible you should upgrade OpenSSL to version 1.0.1 or above.

Downloading...

Composer successfully installed to: /Users/fumio/Documents/HerokuProject/php-getting-started/composer.phar
Use it: php composer.phar

/usr/local/binあたりに移動させる。

$mv composer.phar /usr/local/bin/composer

実行してこうなったら入ってるんじゃないかと思う。
$ composer
______
/ ____/___ ____ ___ ____ ____ ________ _____
/ / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
/_/
Composer version 1.0-dev (cff35071b68e286f68ac64908c990c15b3ac4a0d) 2016-01-31 15:50:19

Usage:
command [options] [arguments]

Options:
-h, --help Display this help message
-q, --quiet Do not output any message
-V, --version Display this app



さてGitHubから引っ張ってくる。
$ git  clone https://github.com/heroku/php-getting-started.git
Cloning into 'php-getting-started'...
remote: Counting objects: 148, done.
remote: Total 148 (delta 0), reused 0 (delta 0), pack-reused 148
Receiving objects: 100% (148/148), 32.44 KiB | 0 bytes/s, done.
Resolving deltas: 100% (55/55), done.
Checking connectivity... done.

php-getting-startedの中身はこんな感じ。
$ ls -aFC
./ .git/ Procfile app.json composer.lock
../ .gitignore README.md composer.json web/
$ ls -aFC web/
./ ../ .htaccess images/ index.php* stylesheets/ views/
$ ls -aFC web/views/
./ ../ header.html index.twig layout.html nav.html
$ ls -aFC web/images/
./ ../ favicon.png lang-logo.png
$ ls -aFC web/stylesheets/
./ ../ main.css

index.phpの中身だけ見てみた。
require('../vendor/autoload.php');

$app = new Silex\Application();
$app['debug'] = true;

// Register the monolog logging service
$app->register(new Silex\Provider\MonologServiceProvider(), array(
  'monolog.logfile' => 'php://stderr',
));

// Register view rendering
$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/views',
));

// Our web handlers

$app->get('/', function() use($app) {
  $app['monolog']->addDebug('logging output.');
  return $app['twig']->render('index.twig');
});

$app->run();
だめだ。今日はここまで!

2016年1月31日日曜日

イメージキャプチャ用Chrome Extension:Awesome Screenshot

このエントリーをはてなブックマークに追加
この前、ブラウザの画面キャプチャ用にブラウザキャプチャ用Chrome Extension:FireShotを紹介したのだが、今度はスクリーンショットを撮った後に簡単に隠したいとこにぼかしやハイライトをつけたいなぁと思った時、FireShotではできなかったので、もう一度探してみるとこに。

そこで見つかったのが拡張機能Awesome Screenshotだった。


Chromeのツールバーからこんな感じで選べる。


例えばスクリーンショットに映った個人名などのあまり人に見せたくないものにぼかしを入れたい場合、Awesome Screenshotでスクリーンショットを撮った後、この水滴みたいな部分をクリックする。


するとシェイプでぼかしを入れたい部分を範囲選択できるので、これでどんどんぼかすことができる。


ただし、ローカルに保存するファイル名がWEBページのタイトルしかつかないので、同じページでいくつかのスクリーンショットを撮る場合はいちいち名前を変えてやらないといけない。

前回紹介したブラウザキャプチャ用Chrome Extension:FireShotだとデフォルトはWEBページのタイトルと時分秒などを設定でテンプレートとして設定できるので便利。

なので、スクリーンショットに簡単に加工を付けたい時と、ただ撮るだけの時とは使い分けるようにしてる。しかもChromeで完結しているのでWindowsやMacなどOSによって使い勝手のいいアプリを探す手間も省けて便利。

クラウド開発環境として使えそうなCloud 9 IDEを使ってみた

このエントリーをはてなブックマークに追加
無料でブラウザベースで扱えるCloud 9 IDEを試してみた。いっつもはローカルのPC内にVMwareなどで仮想マシンを作成し、ライブラリやミドルウェアをインストールしたりしていたのだが家や外出先などの環境によっていちいち作成しているとズレが出たりするので、ちょっと困ってた。

そんな中でみつけたのがCloud 9 IDE。どんな使い勝手か個人使用は無料なので使ってみた。


ログインしたらこんな感じ。


まずは"Create a new workspace"をクリック。


"Project Name"に適当な名前を入れて、今回は"PHP & Apache, MySQL pre-configured"を選択した。


するとこんな感じでProjectが出来上がる。


画面の下にはCLIも用意されていて、コマンドもスムーズに打てる。ちなみにブラウザ上にも関わらずTab補完も可能な感じで違和感ない。

OSはUbuntu 14.04.2 LTS。


テキストエディタでphp.iniも編集できるし、下部のCLIからviで編集もできる。


何、これ。超便利!

MySQLもつないでみよう。データベースどうなってるんだろう。

$ mysql -u root 
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

動いてなかった。こっからどうするんだろう。上の"Run Project"をクリック。


するとこんな感じでコンソールに実行結果が出力される。URLも同時に出力されるので、これが自分の作ったサイトとして反映される。


作っておいたphpinfo()のページもちゃんと表示される。すごいじゃん!


ちなみにMySQLも"Run Project"の時点で起動されていた。

$ mysql -u root 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 49
Server version: 5.5.44-0ubuntu0.14.04.1 (Ubuntu)

Copyright (c) 2000, 2015, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| c9                 |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.00 sec)

mysql> use c9
Database changed
mysql> show tables;
Empty set (0.00 sec)

ちなみにworkspaceはprivateは1つしか作れないけど、publicにするといくつでもProjectを作れるみたい。
HWスペックはこんな感じ。CPU 1Core、Memory1GB、HDD5GB。


ちょっと試したりするなら最高の環境。ちょっと今度から使ってみよう。みなさんにもオススメです。