Archive for 2月, 2012

  1. Hello, Flash World!

    Posted on 2月 29th, 2012 by cx20

    Flash

    Flash は Adobe Systems のブラウザ用プラグインである。名前の由来は FutureWave Software のアニメーションソフト「FutureSplash」から。
    MXML(Macromedia Flex Markup Language)は、Adobe Flex の UI を記述する為の XML 言語である。
    また、ActionScript は、JavaScript に類似した Flash 用のプログラミング言語である。
    ともに、MXML コンパイラを用いることにより、.swf ファイルが生成される。

    ソースコード(MXML)

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Text text="Hello, Flash World"/>
    </mx:Application>

    コンパイル方法(MXML)

    $ mxmlc ./Hello.mxml

    上記の MXML による UI 記述は以下の ActionScript のコードに相当する。

    ソースコード(ActionScript)

    package 
    {
      import flash.display.*;
      import flash.text.*;
     
      public class Hello extends Sprite
      {
        public function Hello()
        {
          var textField:TextField = new TextField();
          textField.text = "Hello, Flash World!";
          this.addChild(textField);
        }	
      }
    }

    コンパイル方法(ActionScript)

    $ mxmlc ./Hello.as

    ソースコード(HTML)

    <html>
      <head>
        <title>Hello, World!</title>
      </head>
      <body>
        <embed src="Hello.swf" type="application/x-shockwave-flash" width="400" heigt="300" />
      </body>
    </html>

    実行方法

    1. Web サーバの公開フォルダ に配置
    2. ブラウザで表示
       http://localhost/doc/hello.html

    実行結果

    Hello, Flash World!
  2. Hello, Java Applet World!

    Posted on 2月 28th, 2012 by cx20

    Java Applet

    Java Applet は Java プログラムの実行形態の1つである。ブラウザ上で動作する。「〜let」は小さいという意味。

    ソースコード(Java)

    import javax.swing.*;
     
    public class HelloApplet extends JApplet {
        public void init() {
            JLabel label = new JLabel("Hello, Java Applet World!");
            getContentPane().add(label);
        }
    }

    ソースコード(HTML)

    <html>
      <head>
        <title>Hello, World!</title>
      </head>
      <body>
        <applet code="HelloApplet.class" height="100" width="200"></applet>
      </body>
    </html>

    実行方法(AppletViewer による表示)

    $ appletviewer ./hello.html

    実行方法(ブラウザによる表示)

    1. Web サーバの公開フォルダ に配置
    2. ブラウザで表示
       http://localhost/doc/hello.html

    実行結果

    Hello, Java Applet World!
  3. Hello, CoffeeScript World!

    Posted on 2月 27th, 2012 by cx20

    CoffeeScript

    CoffeeScript は Ruby や Python ライクな構文のスクリプト言語である。JavaScript にコンパイルすることが可能となっている。
    プログラムは CoffeeScript の公式サイト(http://jashkenas.github.com/coffee-script/)で試すことができる。

    ソースコード(CoffeeScript)

    hello = ->
        console.log("Hello, CoffeeScript World!")
     
    hello()

    上記コードを JavaScript にコンパイルした場合、以下のコードが生成される。

    ソースコード(JavaScript)

    (function() {
      var hello;
     
      hello = function() {
        return console.log("Hello, CoffeeScript World!");
      };
     
      hello();
     
    }).call(this);

    実行方法(スクリプトとして実行)

    $ coffee ./hello.coffee

    実行方法(JavaScript にコンパイルして実行)

    $ coffee -c ./hello.coffee
    $ node ./hello.js

    実行結果

    Hello, CoffeeScript World!
  4. Hello, Node.js World!

    Posted on 2月 26th, 2012 by cx20

    Node.js

    Node.js は Google の高速 JavaScript エンジン V8 をベースとしたアプリケーションサーバーである。

    ソースコード

    var http = require("http");
     
    http.createServer(function (req, res){
        res.writeHead(200, { "Content-Type": "text/html" });
        res.write("<html>¥n");
        res.write("<body>¥n");
        res.write("Hello, Node.js World!¥n");
        res.write("</body>¥n");
        res.write("</html>¥n");
        res.end();
    }).listen(8080);

    実行方法

    1. モジュールの配置
    2. サーバーの起動
       $ node hello.js
    3. ブラウザで表示
       http://localhost:8080/hello.js

    実行結果

    Hello, Node.js World!
  5. Hello, eRuby World!

    Posted on 2月 25th, 2012 by cx20

    eRuby

    eRuby は任意のテキストに Ruby スクリプトを埋め込むことのできる書式の仕様である。名前の由来は「embedded Ruby」から。
    eRuby の類似技術としては、PHP、ASP、JSP 等がある。
    eRuby のライブラリとしては、C言語で実装された eruby や Ruby で実装された ERB、Erubis などがある。
    ERB は Ruby による Web アプリケーションフレームワーク「Ruby On Rails」のデフォルトのテンプレートエンジンとしても採用されている。

    ソースコード

    <html>
      <head>
        <title>Hello, World!</title>
      </head>
      <body>
        <p><%= "Hello, eRuby World!" %></p>
      </body>
    </html>

    実行方法

    1. Web 公開フォルダ に配置
    2. ブラウザで表示
       http://localhost/doc/hello.rhtml

    実行結果

    Hello, eRuby World!
  6. Hello, Django World!

    Posted on 2月 24th, 2012 by cx20

    Django

    Django は Python で実装された Web アプリケーションフレームワークである。名前の由来は作者の好きなミュージシャンから。
    元々はアメリカのある新聞社の社内ツールとして開発された。現在はオープンソースで、Google App Engine でも採用されている。
    Django には独自のテンプレートエンジン、O/R マッパー、正規表現を用いた URLディスパッチャーなどの機能が含まれる。
    ここでは主要な機能のテンプレートエンジンを使用したサンプルを記載する。

    ソースコード(テンプレート)

    Content-Type: text/html
     
    <html>
      <head>
         <title>Hello, World!</title>
      </head>
      <body>
        <p>Hello, {{message}} World!</p>
      </body>
    </html>

    ソースコード(CGIコード)

    #!/usr/bin/env python
    from django.conf import settings
    from django.template import Context
    from django.template.loader import get_template
    settings.configure(TEMPLATE_DIRS=('/Applications/MAMP/cgi-bin/python',))
    tmpl = get_template('template.html')
    print tmpl.render(Context({'message' : 'Django' }))

    実行方法

    1. CGI用フォルダ(cgi-bin等)に配置
    2. 実行権限の付与
       $ chmod +x hello.py
    3. ブラウザで表示
       http://localhost/cgi-bin/hello.py

    実行結果

    Hello, Django World!
  7. Hello, Cheetah World!

    Posted on 2月 23rd, 2012 by cx20

    Cheetah

    Cheetah は Python 用の汎用テンプレートエンジンである。名前の由来は動物のチータから。

    ソースコード(テンプレート)

    <html>
      <head>
         <title>Hello, World!</title>
      </head>
      <body>
        <p>Hello, $message World!</p>
      </body>
    </html>

    ソースコード(CGIコード)

    #!/usr/bin/env python
    from Cheetah.Template import Template
    tpl = Template(file='hello.tpl')
    tpl.message = 'Cheetah'
    print "Content-Type: text/htmlnn"
    print tpl

    実行方法

    1. CGI用フォルダ(cgi-bin等)に配置
    2. 実行権限の付与
       $ chmod +x hello.py
    3. ブラウザで表示
       http://localhost/cgi-bin/hello.py

    実行結果

    Hello, Cheetah World!
  8. Hello, Template Toolkit World!

    Posted on 2月 22nd, 2012 by cx20

    Template Toolkit

    Template Toolkit は Perl 用のテンプレートエンジンの一つである。TT または TT2 と呼ばれている。

    ソースコード(テンプレート)

    <html>
      <head>
         <title>Hello, World!</title>
      </head>
      <body>
        <p>Hello, [% message %] World!</p>
      </body>
    </html>

    ソースコード(CGIコード)

    #!/usr/bin/perl
    use Template;
     
    my $template = Template->new();
    my $message = 'Template';
    my $result;
    my $vars = { 'message' => $message };
    $template->process('template.tt', $vars, $result);
    print "Content-Type: text/htmlnn";
    print $result;

    実行方法

    1. CGI用フォルダ(cgi-bin等)に配置
    2. 実行権限の付与
       $ chmod +x hello.pl
    3. ブラウザで表示
       http://localhost/cgi-bin/hello.pl

    実行結果

    Hello, Template Toolkit World!
  9. Hello, HTML::Template World!

    Posted on 2月 21st, 2012 by cx20

    HTML::Template

    HTML::Template は Perl 用の HTML テンプレートモジュールである。

    ソースコード(テンプレート)

    <html>
      <head>
         <title>Hello, World!</title>
      </head>
      <body>
        <p>Hello, <TMPL_VAR NAME=MESSAGE> World!</p>
      </body>
    </html>

    ソースコード(CGIコード)

    #!/usr/bin/perl 
    use HTML::Template;
    my $template = HTML::Template->new(filename => 'hello.tmpl');
    $template->param(MESSAGE => "HTML::Template");
    print "Content-Type: text/htmlnn";
    print $template->output;

    実行方法

    1. CGI用フォルダ(cgi-bin等)に配置
    2. 実行権限の付与
       $ chmod +x hello.pl
    3. ブラウザで表示
       http://localhost/cgi-bin/hello.pl

    実行結果

    Hello, HTML::Template World!
  10. Hello, Smarty World!

    Posted on 2月 20th, 2012 by cx20

    Smarty

    Smarty は PHP 用のテンプレートエンジンである。名前の由来は「スマート(smart)」から。
    ページにアクセスするとテンプレートはコンパイルされ PHP スクリプトに展開される。

    ソースコード(テンプレート)

    <html>
      <head>
         <title>Hello, World!</title>
      </head>
      <body>
        <p>Hello, {$message} World!</p>
      </body>
    </html>

    ソースコード(PHP)

    <?php
    require_once 'libs/Smarty.class.php';
    $smarty = new Smarty();
    $smarty->template_dir = 'templates/';
    $smarty->compile_dir  = 'templates_c/';
    $smarty->assign('message', 'Smarty');
    $smarty->display('template.html');
    ?>

    上記の PHP コードならびにテンプレートは実行時に以下の PHP スクリプトに展開される。

    コンパイル結果(PHP)

    <?php /* Smarty version Smarty-3.1.7, created on 2012-01-31 00:10:09
             compiled from "templates/template.html" */ ?>
    <?php /*%%SmartyHeaderCode:10960230224f26b28ceec5c3-38524326%%*/if(!defined('SMARTY_DIR')) exit('no direct access allowed');
    $_valid = $_smarty_tpl->decodeProperties(array (
      'file_dependency' => 
      array (
        '41d3b4a4b71afe0c223778e57c23244caee1baec' => 
        array (
          0 => 'templates/template.html',
          1 => 1327936205,
          2 => 'file',
        ),
      ),
      'nocache_hash' => '10960230224f26b28ceec5c3-38524326',
      'function' => 
      array (
      ),
      'version' => 'Smarty-3.1.7',
      'unifunc' => 'content_4f26b28d05af0',
      'variables' => 
      array (
        'message' => 0,
      ),
      'has_nocache_code' => false,
    ),false); /*/%%SmartyHeaderCode%%*/?>
    <?php if ($_valid && !is_callable('content_4f26b28d05af0')) {function content_4f26b28d05af0($_smarty_tpl) {?><html>
      <head>
         <title>Hello, World!</title>
      </head>
      <body>
        <p>Hello, <?php echo $_smarty_tpl->tpl_vars['message']->value;?> World!</p>
      </body>
    </html>
    <?php }} ?>

    実行方法

    ディレクトリ構成
    /doc               … 公開用フォルダ
        /libs          … ライブラリ配置場所
        /templates     … テンプレート配置場所
        /templates_c   … テンプレートコンパイル結果配置場所
     
    1. ライブラリ(Smarty.class.php)を libs に配置
    2. テンプレート(template.html)を templates に配置
    3. ソース(hello.php)を公開フォルダに配置
    4. ブラウザで表示
       http://localhost/doc/hello.php

    実行結果

    Hello, Smarty World!