英語文書を読む時に便利なツールを作成してみた

皆さんは英語の文書を読むの得意ですか？・・・私は苦手です。できることなら全て日本語で済ませたい派です。知らない知識について記述されている物を英語で読むなんて・・・想像するだけでも頭くらくらしてきます。

ということで英語の文書を読む時に「あると便利だなぁ」と思ってたツールを作ってみました。ちなみに今から紹介するのは、Google翻訳の結果をシームレスに確認できるようにするツールですので、英語ができる方にとっては無用の産物かもしれません。

概要

本ツールの正体は簡易的なエクセルのマクロです。翻訳自体はGoogle翻訳で行っていますし、特徴と言えば「翻訳結果をVOICEROIDが音読してくれるかどうか」という部分ですね。

ちなみにVOICEROIDがインストールされていないPCで本ツールを利用した場合、音声は再生されませんがエクセルのシート上に結果を反映されるため、それを確認すれば少しは効率的に作業を進められるかと思います。

• 利用言語：VBA（エクセル）
• 動作環境：IE及び、Excel2016（マクロが動作すること）
• その他：本ツール利用時、クリップボードを専有します。　※今後の改修で改善したいと思っています。

利用想定シーン

私が個人的に英語の文書を読む時に必要な機能を詰め込んだツールですので、基本的にはその用途以外には向いていないと思います。英語学習の際に有効活用とかできますかね・・・？

ターゲット

IEしか利用できなくて、フリーソフト等のインストール（レジストリ書換する行為）が禁止されている環境で、効率的に英文書を読み進めたい人

外部仕様

本ツールはエクセル上で動作するマクロです。ですのでシート毎に説明していきたいと思います。

Google本屋君シート

こちらのシートが本ツールのメインになります。基本的な機能だけ利用するならこのシート以外は操作する必要がありません。このシートで提供する機能は主に以下の3つです。

• Google本屋君マクロ開始ボタン
• 連携システム「echoseika」の配布先リンク
• 紹介動画のリンク

Google本屋君マクロ開始ボタン

シート右上に存在する「押す！」ボタンを押下することでマクロが起動します。起動後はクリップボード監視に関するメッセージダイアログが出現し、その後本体のダイアログが表示されます。

なお、起動時に「VOICEROID+ 琴葉茜」を起動しておくことによりツール起動のボイスを聞くことが出来ます。

連携システム「echoseika」の配布先リンク

本ツールではechoseikaを利用しております。VOICEROIDと連携するためのプログラムですが、参照設定の仕様上、VOICEROIDと連携する想定が無い場合でも、該当ファイルを配置する必要があります。

紹介動画のリンク

導入方法とか利用方法とかを動画で紹介しておりますので、よかったらご視聴下さい。
この記事の一番最後にも貼っておきますね。

設定シート

こちらのシートでは、茜ちゃんが翻訳結果を音読してくれる際の声色のプリセットを設定出来ます。お好みで、下の行に追加していって下さい。追加後は本ツールを一旦閉じて頂き、再び起動していただくことで反映されます。

翻訳シート

こちらはログ表示用のシートだと思っていただいて大丈夫です。A列に翻訳前の原文、B列に翻訳後の訳文を記録しております。

なお、VOICEROIDがインストールされていないPCで本ツールを使う場合はこのシートで翻訳結果を確認することになります。音声にて確認できない分効率は低下しますが、Google翻訳での操作が省ける点ではまだメリットがあるのかなって思います。

リリースノート

このシートは本ツールの機能とは全く関係ありません。リリースノートを私が記入しているものですので、必要に応じて確認してください。

デモンストレーション

以下の動画で本ツールのデモをしております。ぜひ御覧ください。
※2分4秒くらいから始まります。

とりあえずツールの概要については以上になります。
次回以降の記事で、内部仕様についてもう少し解説して、配布用にマクロ部分のリファクタリングが完了したらいよいよ配布していこうと思いますので、お楽しみに！

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おキレいですか？）」です。

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

私の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通信も許可するように設定します。

PuTTYを使ってアクセス

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

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

sudo yum -y update

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

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';

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

きちんと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」で全て消せる見たいです。早速今回利用してみます。

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

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

次回予告

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