SoLA2-TechBlog

退屈な作業はプログラムに任せましょう!日々の作業に少し工夫を足すだけであなたの時間はもっとクリエイティブになる。

Vagrantで立てたサーバにLAMP環境を構築してみる

ローカル開発環境を構築するにあたり、色々なサイトを参考にしたのでまとめてみました。

HTTPサーバ(httpd)のインストール

sudo yum -y install httpd
sudo service httpd start
sudo chkconfig httpd on

各コマンドの意味や、もう少し詳しいhttpdの情報について知りたい場合は、CentOSにApache HTTP Server(httpd)をインストールしてテストページを表示する - TASK NOTESがおすすめです。

PHPのインストール

sudo yum install -y php
sudo cp /etc/php.ini /etc/php.bak
sudo service httpd restart
PHPの設定変更

必要に応じて/etc/php.iniの設定を変更してください。サーバの使い方に合わせて、【PHP】PHPをインストールしたらやっておきたい設定 - Qiitaを参考に設定を変更すると良いと思います。

MySQLのインストール

sudo yum install -y mysql-server
sudo service mysqld start
sudo chkconfig mysqld on
MySQLの設定
sudo mysql_secure_installation

上記コマンドを実行し、管理者ユーザにパスワードを設定し、ゲストユーザを削除します。

また、データベース上で使用する文字コードの設定をUTF8に変更します。変更は下記内容を、/etc/my.cnfの[mysqld]欄の末尾に追記することで適応されます。

character-set-server = utf8

phpMyAdminのインストール

phpMyAdminは標準のリポジトリには入っていないので、インストール前にEPELリポジトリを追加する必要があります。CentOS 7 : 初期設定 : リポジトリ追加 : Server Worldを見ながら追加しましょう。

リポジトリ追加後、下記コマンドを実行します。

sudo yum -y install phpmyadmin
phpMyAdminのアクセス制限を設定する

/etc/httpd/conf.d/phpMyAdmin.confに内部ネットワーク(仮想サーバのプライベートIP)からのアクセスを許可する設定を追加します。追加箇所がインストールしたApacheのバージョンによって異なりますので、ファイル内のコメントを確認しながら編集してください。

apache2.4の環境であれば、CentOS 7 phpMyAdminインストール | 自宅サーバー構築メモ(CentOS)が参考になります。

AWS上にWEBサービスを公開してみる【part3】

WEBサービス公開しました

AWS上にWEBサービスを公開してみる【part0】 - SoLA2-TechBlogで宣言しました通り、本日AWS上にWEBサービスを公開しました!いやーほんとに期限ギリギリでしたがセーフとしましょうっ!

サービス概要

さてどんなサービスを作ったのかと言いますと、「訪問者のIPアドレスを色で表現するサービス(あなたのIPおキレいですか?)」です。

例えば私がこのサイトを訪問すると、こんな感じで表示されます。

f:id:gootor3030:20170820230051p:plain

私のIPアドレスは美しい色の形容らしいです。すばらしい!

仕組み

IPアドレスを色で表現とか、どうやってるのかって話ですが、実はとても簡単な仕組みです。IPアドレス(V4)の表記って、255が4つ並んでますよね。内最初の255は国や機関で固定なので省くと、RGB(24bit)と同じ表記になります。これを利用してIPアドレスを色に変換しているというわけです。

後は、Wikipediaから色名情報をお借りして近似色を求め、表示してあげるだけです。

課題

実はまだ「みんなの色」と「about」のページは作成中です。こんな形でWEBサービスを開始したと言い張るなとツッコミが来そうですが、ほんとすみません。反省してます。

色判定機能の課題としては、Wikipediaそのまま引用しているので、英語表記や日本語表記がバラバラになってしまっている点です。約680色あるのですが、これは手作業で直していくしかなさそうです。

次回予告

この記事のタイトル通りWEBサービスは公開しましたが、如何せん内容が未完成すぎるのでもう少し完成度を高めてこの記事も完結させたいと思います。お楽しみに!

独自ドメインに変更しました【お知らせ】

ドメイン変更のお知らせ

2017年8月20日に当ブログのドメインを変更いたしました。それに伴いアドレスも下記の通り変更となります。

旧アドレス:http://sola2-tech.hatenablog.com/
新アドレス:http://www.sola2-tech.com/

もしお気に入り等に登録していただいている方がいらっしゃいましたら、お手数おかけいたしますが、変更対応をよろしくお願いします。

今後とも「SoLA2-TechBlog」をよろしくお願いします。

AWS上にWEBサービスを公開してみる【part2】

インスタンスが消えた!?

日を改めて作業を再開した時の事です。この前作成したはずのインスタンスがコンソールから消えてしまったのです。まさかインスタンスを「停止」ではなく「削除」してしまったのか・・・とそんな風に思っていたのですが、ふとこのブログ用に取っていたスクリーンショットを確認すると、停止後のインスタンスも表示されています。

ということは誤操作というわけではなさそうです。ではなぜ消えてしまったのか。もしかすると停止したままのインスタンスは一定期間をすぎると消されてしまうのでしょうか?Google先生に聞いてみました。

「消えた」のではなく「見えない」だけだった

「Amazon EC2 のインスタンスが消えた!」の顛末 : まだプログラマーですが何か?答えはこのサイトにありました。原因を端的に言ってしまえば、リージョンの違いによるものでした。つい先日、音声合成サービス「Polly」を利用するため、リージョンを「東京」から「オハイオ」に変更していたのです。その為、コンソールの表示内容もオハイオリージョンのものになっており、東京に作ったインスタンスは表示されていないというオチでした。

いやーでもこの記事がなかったらすごく悩んでいたと思うんです。ほんと感謝です。

WEBサーバを構築する

HTTPでの通信を許可する

では気を取り直して作業を始めていきたいと思います。

まずは、セキュリティグループの設定です。インスタンス作成直後は、EC2に対してSSHでしかアクセスを許可していないため、HTTP通信も許可するように設定します。

f:id:gootor3030:20170819190616p:plain

PuTTYを使ってアクセス

セキュリティグループの設定が終わりましたら、クライアントからEC2にアクセスしたいと思います。手元にPuTTYがあったので、これを利用します。ちなみに、前回の記事秘密鍵をダウンロードしましたが、ここで使用します。

無事アクセスできると、Linuxをアップデートしてくださいとメッセージが表示されるので、下記コマンドを実行し最新版に更新します。

sudo yum -y update

f:id:gootor3030:20170819191823p:plain

ミドルウェアのインストール

Linuxが最新になりましたら、いよいよWEBサーバに必要となるミドルウェア類をインストールしていきます。下記コマンドを実行することで、「HTTPサーバ」「PHP」「データベース」がインストールされ、HTTPサーバが起動します。

sudo yum -y install httpd php mysql
sudo service httpd start

また、EC2起動後すぐにHTTPサーバも立ち上げたいので、下記コマンドを実行します。

sudo chkconfig httpd on
ドキュメントルートにindex.htmlを配置する

さてここまで作業すると、ブラウザからアクセスすることが出来るはずです。ただし、現状だとApacheのサンプルページが出てくるだけなので、どうせならphpファイルを作成してそれを表示するところまでやりましょう。

ファイルはサーバ上で直接作成しても良いのですが、どうもCUIが苦手なので、ローカルでindex.phpを作成し、CyberduckにてEC2のドキュメントルートに配置することにします。

<?php
echo '初めてのAWS';

では早速ブラウザで確認してみましょう。

f:id:gootor3030:20170819200814p:plain

きちんとindex.phpの内容が表示されています。これでWEBサービスを公開するための設定は完了です。

次回予告

次回はいよいよWEBサービスをEC2上にのせていこうと思います!お楽しみに!

【PHP】非同期処理の内容が反映されないときのチェックポイント

非同期処理の反映

WEBアプリを開発していると、非同期処理をする事があると思います。

今回の記事では非同期で処理したサーバ側のデータがフロントサイドにうまく反映されない問題について取り上げてみたいと思います。理由は私が今日この問題が原因で4時間近くも浪費してしまったためです。。。

前提

開発言語はPHP、非同期処理にはajaxを利用します。

チェックポイント

まず初歩的な問題を確認してみましょう。

  • 非同期処理の結果をちゃんとHTMLに反映しているか
  • 非同期処理が正常に動作しているか
  • 反映の方法に間違いは無いか

Google先生に聞くと多くの回答が上記3点に集約されます。私もよく失敗してしまうのですが、非同期で処理した内容をフロントサイドに戻さないと、当然ブラウザにも反映されません。更新ボタンを押すと正常にデータが更新されているならまずはこの線を疑うと良いと思います。

非同期処理が正常に動作しているかを確認する

冷静にフロントサイドへ処理を戻していることを確認して、それでもブラウザ側に反映されていないという場合、次に確認すべきは非同期処理です。下記の点を確認してみましょう。(※非同期処理が正常に動作していない場合の確認事項ですので、更新ボタンを押すと正常に反映される場合は飛ばしてください。)

  • ajax用のjavascriptはちゃんとインポートしているのか
  • ajax内でエラーは発生していないか
  • ajaxから呼ばれるPHPファイルは読み込まれているのか

※2点目、3点目の調査にはディベロッパーツールを使うと便利です

反映の方法に問題が無いか確認する

さてさて、ここまで確認してなおフロントサイドに反映されてないとなると、残るはその反映の仕方です。下記の点について確認してみましょう。

  • 反映させたいタグは正しく取得出来ているか
  • 反映させたいタグに対して正しいメソッドを使っているのか
  • 確認しているブラウザの仕様ではないか

1点目については、よくあるケアレスミスなので一応確認してみると、バグの神様が微笑んでくれるかもしれません。

2点目については、割りと見落としがちですがHTMLの仕様についての問題です。値を変更するためのメソッドはいくつかあると思いますが(「innerHTML」「innerText」「textContent」「value」など)タグによって対応するメソッドが変わったりします。一度反映させたいタグがそのメソッドに対応しているか確認してみると幸せになれるかもしれません。

3点目については、値を変更するためのメソッドがブラウザによっては使用出来ない問題です。他のメソッドについては調べていませんが、InternetExplorerであれば「textContent」、Firefoxであれば「innerText」が使用出来ないそうです。ちなみに「innerHTML」はどちらのブラウザでも利用出来ます。

全部確認した、でも反映されない・・・

私の場合、上記すべてを確認しても反映されない頑固な輩がいらっしゃいました。もういっそ同期通信で妥協しようかとすら思ったのですが・・・今回は粘り勝ちました!

タグの取得方法で、「$('ID名')」を用いると、値を反映出来ないケースが有るらしいので、「getElement系のメソッド」を用いることで、今回の問題は解決しました。

success: function (res) {
  //修正前
  $('#SampleID_' + id).innerHTML = String(res.vote); 

  //修正後
  document.getElementById('SampleID_' + id).innerHTML = String(res.vote); 
}

これってajaxを使う人だと割りと当たり前のことなのでしょうか?
まだ根本的な原因がわかっていないので、調査の必要がありそうです。もし原因がわかる方いらっしゃいましたら是非ともご教授ください!

今さらTwitterボットを開発してみた。【part 2】

クラスの作成

拡張性を重視するなら個人的にはオブジェクト指向で記述した方が便利に感じるので、適当な粒度でクラス化していきます。とはいえ基本的な方針は「Twitterボットプログラミングテクニック」に載っている内容に沿って開発します。

Botクラス

Twitterと通信してボットに対して呟く命令等をやり取りするクラスです。基本的には「TwitterOAuth」が面倒な部分をカバーしてくれていますので、私が開発する箇所は、後で出てくるResponderクラスで処理した結果を「TwitterOAuth」に渡すところと、そのエラーチェックの部分だけです。

Responderクラス

ボットに対して命令したい内容を生成するクラスにする予定ですが、現在は固定文言を呟く命令を生成するためのクラスとなっております。後々抽象化して、機能毎に継承するように改良していきます。

ソースコード

前回の記事から変更点があった「bot.php」と、新しく作成した「responder.php」の2点を紹介します。

bot.php
<?php

require_once(__DIR__ . '/config.php');
require_once(__DIR__ . '/responder.php');

use Abraham\TwitterOAuth\TwitterOAuth;

echo '処理開始' . PHP_EOL;
$responderInstance = new Responder();
$responderInstance->Response('クラス化テスト');
echo '処理終了' . PHP_EOL;

class Bot{
    private $connection;    //直接Twitterとやり取りする
    private $responder;     //Twitterにどのような命令を投げるかを処理する

    public function Bot($responder,$consumerKey = CONSUMER_KEY,$consumerSecret = CONSUMER_SECRET,
                        $accessToken = ACCESS_TOKEN,$accessTokenSecret = ACCESS_TOKEN_SECRET){
        $this->connection = new TwitterOAuth($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);
        $this->responder = $responder;
    }

    //処理結果を検証する
    private function checkResult($result){
        if ($this->connection->getLastHttpCode() === 200) {
            echo '成功!' . PHP_EOL;
        } else {
            echo '失敗!' . $result->errors[0]->message . PHP_EOL;
        }
    }

    //つぶやく処理
    public function Tweet(){
        $opt = $this->responder->getArgs();
        $res = $this->connection->post("statuses/update",$opt);
        $this->checkResult($res);
    }
}

処理結果を検証するメソッドとつぶやく処理を分けた理由は、今後追加機能が発生した場合でも、おそらくチェック処理だけは共通なのではないかという淡い期待を抱いてのものです。

responder.php
<?php

require_once(__DIR__ . '/responder.php');

//ただ呟くだけのResponder
//機能追加はこのクラスを継承して実装
class Responder{
    private $args;

    public function Responder(){
        $this->opt = array();
    }

    //このメソッドをオーバーライドする
    public function Response($input){
        $this->args['status'] = $input;

        $bot = new Bot($this);
        $bot->tweet();
        return true;
    }

    public function getArgs(){
        return $this->args;
    }
}

ResponderクラスにBotクラスを持たせているのには理由があります。今後cronにて自動実行することになると、おそらく、ボットに対して「何かを命令する回数」よりも「何も命令しない回数」の方が多くなるはずです。

であれば、何もしない場合はTwitterへの接続を控えたいので、まずResponderクラスを生成し、必要であればBotクラスを生成する手順にしております。言ってしまえば、好みの問題です。

実行結果

早速、開発環境で実行してみます。ちなみに前回の記事で、ターミナルの余計な部分を表示させないために改行しまくるというアナログチックな対応をしておりましたが、「Ctrl+l」で全て消せる見たいです。早速今回利用してみます。

f:id:gootor3030:20170814202708p:plain

無事処理が終了していそうです。表示内容もすっきりしていてスマートです!

f:id:gootor3030:20170814202549p:plain

肝心のツイートもちゃんとされています。これで心置きなく追加機能を実装できそうですね!

次回予告

次回はいよいよ決まった時間につぶやく機能を作っていきたいと思います。お楽しみに!

今さらTwitterボットを開発してみた。【part 1】

認証について

ボット用のアカウントに接続する方法はいくつかありますが、ドットインストールでは「TwitterOAuth」というパッケージを用いて認証を行っていましたので、今回はこちらを利用したいと思います。

composerを利用してTwitterOAuthをインストールする

まずはcomposerの公式サイトにアクセスし、「Getting Started」ボタンからページ中段にあるコマンドをPHPがインストールされているローカル開発環境の作業ディレクトリで実行します。

php composer-setup.php --install-dir=bin --filename=composer

composerをダウンロードが完了しましたら、いよいよ「TwitterOAuth」をインストールしていきます。TwitterOAuthの公式サイトにアクセスし、Installationに記述された文をローカル開発環境で実行します。

ちなみにこのcomposerでインストールできるpackageの一覧についてはPackagistというサイトで確認することが出来るそうです。

定型文を呟かせてみる

実装

さてTwitterOAuthのインストールが完了しましたら、まずは簡単なモックを作成してみましょう。プログラムから固定文をボットアカウントにつぶやくだけの仕組みを作ってみたいと思います。

<?php

require_once(__DIR__ . '/twitteroauth/autoload.php');
define('CONSUMER_KEY', '*');
define('CONSUMER_SECRET', '*');
define('ACCESS_TOKEN', '*');
define('ACCESS_TOKEN_SECRET', '*');

アカウント情報はプログラム内で頻繁に利用するため、定義しておきます。こういった定義は、後々増えていきますので、定義用のファイルとして本体から切り離しておきます。

<?php

require_once(__DIR__ . '/config.php');

use Abraham\TwitterOAuth\TwitterOAuth;

//接続
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);

$res = $connection->post("statuses/update", [
    'status' => 'さんぷる'
]);

if ($connection->getLastHttpCode() === 200) {
    echo '成功!' . PHP_EOL;
} else {
    echo '失敗!' . $res->errors[0]->message . PHP_EOL;
}

純粋にTwitterへ接続し、サンプルメッセージ「さんぷる」を投稿するだけのシンプルなプログラムですね。ではこれを実行してみましょう。

動作検証

f:id:gootor3030:20170814131224p:plain

コマンドライン上では成功!と表示されました。

f:id:gootor3030:20170814131341p:plain

実際のTwitterでも「さんぷる」と呟かれていますね。

次回予告

今回はとりあえず動くことを目標にコーディングしてきました。次回はこれらのコードをクラス化し今後の機能拡張に向けた準備を整えます。お楽しみに!