SoLA2-TechBlog

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

【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でも「さんぷる」と呟かれていますね。

次回予告

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

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

定期的にランダムな内容を発言するボットを開発します

薄々と感じる違和感

事の発端は、1ヶ月くらい前でした。元々は動画の企画で、パーソナリティのボットを作成しようというありきたりなモノでした。

でも、ただボットを作成するだけではつまらないので、発言内容を募集することになったんです。募集方法は主に動画のコメントか、募集サイトを開設してそこに視聴者が投稿する方式を採用しました。

この時既に薄々感じていました。ある違和感に・・・。とはいえものづくりは準備段階が楽しいもので、あれやこれやとたくさんアイデアが出てくるものです。それを前にしてもなお、そのような違和感を気にかけられる程、私は玄人ではありませんでした。

違和感の正体

企画の方向性もある程度決まり、そろそろ開発にも着手し始める頃、その違和感は確信に変わっていくのです。

「自動でつぶやく設定とかどこでするんだろう?」

そう、Twitter初心者だった私は愚かにもボット機能は公式で提供している機能だと思い込んでいたのです。見つかるはずのないその機能を探すこと1時間余り・・・私は認めざるを得ませんでした。その非情と向き合う覚悟をすると共に、心の中でこうつぶやくのです。

Twitterが公式で提供しているボット機能なんてなかったんや・・・)

対応策はエンジニアらしく

という訳で!公式で提供されていない以上、対応策は「一般のBOT作成サービスを利用する」か、「Twitterが提供しているAPIを利用して自分で作る」の2択なわけです。今後の事を考えると、呟く内容はDBから取得できるようにしたいので「自分で作る」事にします。

実はAPIとか初めてなんです

お恥ずかしい話なのですが、私はWEBサービスが提供するAPIを利用して開発した経験が無いため、下記の教材を利用しながら開発を進めていきます。言語はPHP(教材が殆どこの言語だったので)、エディタはPHP Stormを使います。

書籍

Amazonでそれっぽい古本を購入しました。合計400円(送料込み)は非常に安いと思うんです!

動画

以前から利用している動画サイト。幅広い知識を手軽に吸収できるので重宝してます。

  • ドットインストール
  • paizaラーニング

開発環境

今回はVagrantでローカル開発環境を立ててそこでデバッグしながら開発していきます。主にドットインストールで学んだ手法です。最終的には今契約しているロリポップのcronに設定しようと思います。

※ちなみにこちらがボットアカウントです。
twitter.com