sironekotoroの日記

Perl と Mac の初心者の備忘録

業務に役立つPerl 12章 WebフレームワークMojolicious ・・・のちょっと改造

  • いきなり12章?

    • 一時「Perl」と名のつく本を片っ端から買っていた頃があって
    • その後に「初心者向けの本を順にこなしていこう」と思い、後回しになっている本。
      • いまは「続・はじめてのPerl
    • でも、MojoliciousでAjaxをどーしてもやってみたくて、先にちょっとだけ見てみた。
  • JQueryを使った方法だった

    • ソースを写経してみたけど動かず。
    • 本に掲載されていた頃のMojoliciousと、自分のPCに入れていたMojoliciousのバージョン違いによるものだった
  • うちがプログラミングに興味を持ちつつあった頃に、バズワードだったのがGoogleMapのUIを実現させたAjaxだった

  • そして、当時はさっぱりわからなくて挫折した
    • そりゃそうだ、フロントエンドのJavascriptにサーバー側で動くPerlなりPHPなりを知らないといけなかったんだもの
    • 無謀すぎる
  • それだけに、今、自分の端末で動いてうれしい
  • でも、これを「自在に」となるとJavascriptJQueryの勉強もしなきゃならんのよねー

  • せっかくなので、最近勉強していまいちなクロージャを組み合わせてカウンタを実装してみた。

    • クロージャ:例)カウンタを作ろう!みたいなの多いんで
  • カウンタつくってもなー、とかおもってたけど、いざ動かしたらすごい感動した。何だこの感動
use strict;
use warnings;

use Mojolicious::Lite;
require 'counter.pl';

# クロージャの変数セッティング
my $count = 0;
{
     sub count {++$count};
     sub count_now {$count};
}


# トップページ
get '/' => 'index';

# 「Hello World」というデータを取得するためのURL
get '/api/hello' => sub {
    my $self = shift;

# クロージャ呼び出してカウント足す
count();
# 現時点のカウントを変数に入れる
my $count_now = count_now();

    # JSONとしてデータを描画
    $self->render( json => { message => 'Hello World', counter => "$count_now" } );
} => 'apihello';

# アプリケーションの開始
app->start;

__DATA__

# トップページのHTML
@@ index.html.ep
<html>
   <head>
       <title>ajax application</title>

       <!-- 4-1.JQueryの読み込み -->
       <script type="text/javascript" 
               src="http://code.jquery.com/jquery-1.4.4.min.js">
       </script>
   </head>

   <body>

       <script type="text/javascript">
       // 4-2.ページを読み込んだときに実行する関数の登録
       $(document).ready(function(){

           // 4-3.ボタンをクリックしたときに実行する関数の登録
           $('input[name="get"]').click(function() {

               // 4-4.Webサーバにリクエストを送信
               $.ajax({
                   type : "get",
                   url : "<%= url_for 'apihello' %>",
                   success : function(result){

                       // 4-5. Ajax通信が成功した場合にデータを描画
                       $("#display").text(result.message);
                       $("#counter").text(result.counter);
                   },
                   dataType : "json"
                   });
               });
           });
       </script>

       <style type="text/css">
           #display {
               font-size:200%
           }
       </style>

       <h1>Ajax application</h1>

       <!-- 4-6.ボタン -->
       <input type="button" name="get" value="Get Data">

       <!-- 4-7.文字が描画される場所 -->
       <div id="display"></div>
       <div id="counter"></div>
   </body>
</html>