M.C.P.C.

―むり・くり―プラスコミュニケーション（更新終了）


| トップページ |

2011年8月21日 20:15

Mojolicious::Liteに挑戦してみた

このエントリーをはてなブックマークに追加 mixiチェック

Perlでの動的なウェブサイトを作るのに今までは全面的にCGI::Applicationを使っていたのですが、いまさらCGI::Applicationをというのものなーとか思い、また、CGI::Applicationで構築するとプラグインをたくさん使うということもあり、可搬性に乏しいということも経験しているので、ここはいっそのこと、新しめのフレームワークを使ってみようかと思い、Mojolicious::Liteにチャレンジしてみました。

今回は課題として、僕が過去にCGI::Applicationで作ったサイト「HWNDBasedPanerView.com」のトップページの表示と同じものを作る、というのを設定しました。参考までに、HWNDBasedPanelView.comのスクリーンショットはこちら。

Hwnd01

これを、以下のようなプログラムで表示できます。実際のサイトではデータベースに接続しているところは割愛して、配列にpushすることで表現しています。

Filename: index.cgi

#!/usr/bin/perl
use Mojolicious::Lite;
use utf8;
 
get '/' => sub {
  my $self = shift;
  my @images;
  push @images, { href => 'zcg80', date => '2011-08-09 12:04:04', image => '1312859044.png', };
  push @images, { href => 'wVt5u', date => '2011-06-22 15:38:28', image => '1308724708.jpg', };
  push @images, { href => 'eL8Lm', date => '2011-06-02 13:09:39', image => '1306987779.gif', };
  push @images, { href => 'nQiVq', date => '2011-04-13 13:34:54', image => '1302669294.jpg', };
  push @images, { href => '5FYBi', date => '2011-04-13 13:26:49', image => '1302668809.jpg', };
  push @images, { href => 'snT0s', date => '2011-02-10 16:27:56', image => '1297322876.JPG', };
  push @images, { href => '2gN2w', date => '2011-01-06 13:30:05', image => '1294288205.jpg', };
  push @images, { href => '95aa4', date => '2010-12-25 08:56:17', image => '1293234977.jpg', };
  push @images, { href => 'iakk8', date => '2010-12-25 01:20:31', image => '1293207631.jpg', };
  $self->render( images => \@images, );
} => 'index';
 
app->defaults({ site_name => 'HWNDBasedPanelView.com', });
app->start;
 
__DATA__
 
@@ index.html.ep
% title $site_name;;
% layout 'index';
<% my $thumbnail = begin %>
<% my ($href, $date, $image) = @_; %>
                  <li>
                    <a href="href" title="<%= $date %>">
                      <img src="thumb.cgi?file=<%= $image %>"
                        style="width: 75px; height: 75px;"
                        alt="<%= $date %>"
                      />
                    </a>
                  </li>
<% end %>
<% content_for sidebar => begin %>
            <p><strong style="font-weight: bold;">HWNDBasedPanelView</strong>とは、Windows版InDesignにおいて、まれに発生するバグです。</p>
            <p>この画像共有サービスでは、HWNDBasedPanelViewが発生したスクリーンショットを共有します。</p>
            <h2>主な機能：</h2>
            <ul>
              <li>アップロードされた画像を表示できるPermalinkを発行します（http://hwndbasedpanelview.com/iakk8 のような形式）</li>
              <li>FacebookページにPermalinkを投稿します（ユーザー様のウォールには投稿しません）</li>
              <li>Twitterの投稿したユーザー様のタイムラインに、Permalink付きで投稿できます（クライアント名がHWNDBasedPanelViewとなります）</li>
              <li>ソフトウェア販売元のアドビシステムズ様が運営しているTwitterアカウント【<a href="http://twitter.com/adobestore_jp/" target="_blank">@adobestore_jp</a>】に知らせることができます</li>
              <li>ソフトウェア開発元のアドビシステムズ様の<a href="https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&lang=Japanese" target="_blank">不具合報告フォーム</a>に投稿できます（投稿者はサイト管理者が代理で行います）</li>
            </ul>
            <p>HWNDBasedPanelView以外の画像を投稿した場合は、予告なしで消しますので、あしからず。（サイト管理者：<a href="http://blog.dtpwiki.jp/dtp/" target="_blank">CL</a>）</p>
            <div class="notice">
              <h2>このバグについての公式情報は</h2>
              <ul><li><a href="http://go.adobe.com/kb/ts_236511_ja-jp" target="_blank">起動するとタスクバーに HWNDBasedPanelView UID:... がある（Windows 版 InDesign CS4/CS5）</a></li></ul>
              <h2>アドビシステムズ様への製品改善要望は</h2>
              <ul><li><a href="https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform&lang=Japanese" target="_blank">Adobe - 製品への要望 / 不具合報告 フォーム</a></li></ul>
            </div>
<% end %>
<% content_for meta_description => begin %>アドビシステム社のソフトウェアAdobe InDesignで発生するHWNDBasedPanelViewウィンドウが表示される不具合の画像を投稿します。Twitterのアカウントと連動して投稿します。<% end %>
              <article>
                <ul class="thumbnails">
                  
                  <% foreach my $item (@$images) { %>
                  <%== $thumbnail->($item->{href}, $item->{date}, $item->{image}) %>
                  <% } %>
 
                </ul>
              </article>
 
@@ layouts/index.html.ep
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <meta name="author" content="CL" />
    <meta name="generator" content="Mojolicious::Lite" />
    <meta property="og:site_name" content="<%= $site_name; %>" />
    <meta property="og:type" content="product" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<%= url_for '/rss' %>" />
    <meta name="description" content="<%= content_for 'meta_description' %>" />
    <meta property="og:description" content="<%= content_for 'meta_description' %>" />
    <meta name="keywords" content="<%= $site_name; %>,Adobe InDesign,Twitter,画像投稿" />
    <!-- ＜%= stylesheet '/css/styles.css' %＞ こう書きたいがCGIだと自分自身へのリクエスト発生して重くなるので次行のように-->
    <%= stylesheet begin %>
    <%= include 'css/styles', format => 'css' %>
    <% end %>
  </head>
 
  <body>
    <div id="doc4" class="yui-t6">
      <div id="hd" role="banner">
        <div id="login">
          <p id="logintext">
            <a href="<%= url_for '/auth' %>">ログイン（Twitter OAuth）</a>
          </p>
          <header>
            <h1>
              <a href="<%= url_for '/' %>">
                <%= $site_name; %></a
              >
            </h1>
          </header>
          <p id="uploadtext">
            <a href="<%= url_for '/upload' %>">
              アップロード</a
            >
          </p>
        </div>
      </div>
 
      <div id="bd" role="main">
        <div id="yui-main">
          <div class="yui-b"><div class="yui-g">
              <!-- YOUR DATA GOES HERE -->
              <%= content %>
          </div></div>
        </div>
        <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE -->
        
          <div class="sidebar">
            <%= content_for 'sidebar' %>
          </div>
          
        </div>
 
      </div>
      <div id="ft" role="contentinfo">
        <p>
          <%= $site_name; %> /
          Copyright &copy; 2010-2011 CL All Rights Reserved.</p
        >
      </div>
    </div>
  </body>
</html>
 
@@ css/styles.css.ep
@import url('//yui-s.yahooapis.com/2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css');
html { background-color: #aa5566; }
body { background-color: #aa5566; }
#hd {
  background-color: #aa5566;
  color: white;
  padding-bottom: 3px;
}
#hd a { color: white; }
#bd {
  padding: 20px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  behavior: url(/js/PIE.htc);
  background-color: white;
  position: relative; 
}
#hd h1 {
  font-size: 48px;
  font-family: Times, 'Times New Roman', Serif;
  font-weight: bold;
}
#hd h1 a {
  text-decoration: none;
  color: white;
}
.thumbnails {
  padding: 5px;
  background-color: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  behavior: url(/js/PIE.htc);
  position: relative; 
}
.thumbnails:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}
.thumbnails li {
  width: 75px;
  height: 75px;
  float: left;
  padding: 5px;
  background-color: #ddd;
}
.thumbnails a {
  display: block;
  width: 75px;
  height: 75px;
  overflow: hidden;
  background-color: white;
}
#ft {
  color: white;
  padding: 10px;
  padding-left: 0px;
}
/* .yui-b: sidebar  */
.sidebar {
  background-color: #fefefe;
}
.sidebar h2 {
  font-size: 116%;
  font-weight: bold;
  line-height: 1.7;
}
.sidebar p {
  line-height: 1.5;
  margin: 0px 0px 7px 0px;
}
.sidebar li {
  list-style-type: disc;
  margin-left: 16px;
  margin-top: 4px;
  margin-bottom: 7px;
  line-height: 1.4;
}
.sidebar strong {
  font-weight: bold;
}
.sidebar a {
  color: #a10;
}
.sidebar a:hover {
  background-color: #a56;
  color: white;
}
.sidebar div.notice {
  padding: 5px;
  background-color: #a56;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  behavior: url(/js/PIE.htc);
  position: relative;
  color: white;
}
.sidebar div.notice a {
  color: white;
}
.sidebar div.notice a:hover {
  background-color: white;
  color: #a56;
}
#login {
  position: relative;
}
p#logintext {
  position: absolute;
  z-index: 3;
  right: 0;
  margin: 4px 0px;
  font-weight: bold;
  line-height: 1.8;
}
p#uploadtext {
  margin-bottom: 8px;
}

Hwnd02

トップページだけの再現で、ほかのルート（CGI::Applicationで言うところのランモード）は作っていませんので、ログインとかしても無駄です。

Mojolicious::Liteを使えば、割合簡単にCGI::Applicationからの移植ができそうです。あとは、CGI::Applicaitonのプラグインで実現していたセッションや認証などをMojolicious::Liteの作法に合わせればいいのかな。

参考にした：

投稿　大野 義貴 [Perl] | |

トラックバック(0)

トラックバックURL: http://blog.dtpwiki.jp/MTOS/mt-tb.cgi/3685

コメントする

書いている人： CL

印刷会社に13年間務め、DTP編集、製版・出力、システム開発、営業、Webプログラミング、企画、環境保全、労働安全衛生、コールセンター（インバンド・アウトバンド）、生産補助などに携わりました。転職決まりました。

評価・実績：

  • 前職：出力業務（印刷通販・システム整備）
  • 印刷業界内：DTPデータ検証・予防保全
  • 対外実績：独ハイデルベルグ社主催2008年世界環境大賞受賞応募書類作成

詳細→CLのGoogleプロフィール

カテゴリー

総エントリー数：3968

最近のコメント

RSS

最近の記事

最近のトラックバック

バックナンバー

RSS 1.0 RSS 1.0
はてぶカウンタ++
フィードメーター - M.C.P.C.

プロフィール

あわせて読みたい