Serverman@VPSのphpを動作確認用に5.2、5.3を切り替えられるようにする

2011.09.30

そろそろ、php5.3へ移行しないとなぁというわけで、 Serverman@VPSのphpを動作確認用に5.2、5.3を切り替えて 動作させられるようにした(同時実行はできない)。

env, conditions

  • DTI ServerMan@VPS
  • Cent OS 5.4(Final)
  • PHP 5.2.10とApache2はインストール済み

refs

php5.3.8のインストール

php5.3.8 source download http://php.net/downloads.php

1
2
3
4
$ mkdir /usr/local/php-5.3.8
$ tar zxf php-5.3.8.tar.gz
$ cd php-5.3.8
$ ./configure --prefix=/usr/local/php-5.3.8 --mandir=/usr/local/php-5.3.8/share/man --infodir=/usr/local/php-5.3.8/share/info --with-config-file-path=/usr/local/php-5.3.8/etc/php5 --with-config-file-scan-dir=/usr/local/php-5.3.8/var/db/php5 --enable-bcmath --enable-ctype --enable-dom --enable-filter --enable-hash --enable-json --enable-libxml --enable-mbstring --enable-pdo --enable-session --enable-simplexml --enable-tokenizer --enable-xml --enable-xmlreader --enable-xmlwriter --with-bz2=/usr --with-gd=/usr --with-mcrypt=/usr --with-mhash=/usr --with-mysql=/usr --with-pdo-mysql=/usr --with-pcre-regex=/usr --with-readline=/usr --with-libxml-dir=/usr --with-zlib=/usr --without-pear --disable-cgi --with-ldap=/usr --with-apxs2=/usr/sbin/apxs

makeによってphp-5.2.10のlibphp5.soは上書きされてしまうので、 その前にリネームしphp-5.3.8に上書きされないようにする:

1
 $ sudo mv /usr/lib/httpd/modules/libphp5.so /usr/lib/httpd/modules/libphp52.so

makeしてインストール:

1
2
3
$ make
$ sudo checkinstall #<== RPMを作っておくだけ(RPMが要らないならこの行は不要)
$ sudo make install

インストールを確認:

1
2
3
4
$ /usr/local/php-5.3.8/bin/php -v
PHP 5.3.8 (cli) (built: Sep 30 2011 16:34:26)
Copyright (c) 1997-2011 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$ /usr/local/php-5.3.8/bin/php -m
  [PHP Modules]
  bcmath
  bz2
  Core
  ctype
  date
  dom
  ereg
  fileinfo
  filter
  gd
  hash
  iconv
  json
  ldap
  libxml
  mbstring
  mcrypt
  mhash
  mysql
  pcre
  PDO
  pdo_mysql
  pdo_sqlite
  Phar
  posix
  readline
  Reflection
  session
  SimpleXML
  SPL
  SQLite
  sqlite3
  standard
  tokenizer
  xml
  xmlreader
  xmlwriter
  zlib
 
  [Zend Modules]

インストールされたlibphp5.soをphp5.3用として分かるようにリネーム:

1
$ sudo mv /usr/lib/httpd/modules/libphp5.so /usr/lib/httpd/modules/libphp53.so

httpd.confのphp5_moduleの読み込みをコメントアウトした:

1
2
3
4
5
6
$ vi /etc/httpd/conf/httpd.conf
#LoadModule php5_module modules/libphp5.so #<== コメントアウト
...
...
...
Include conf.d/*.conf

conf.d/php.confでphpモジュールを切り替えるようにした:

1
2
3
$ vi /etc/httpd/conf.d/php.conf
#LoadModule php5_module modules/libphp53.so
LoadModule php5_module modules/libphp52.so #<== php5.2を使う

設定ファイルの検査:

1
2
$ apachectl configtest
Syntax OK

configureで発生したエラー

configure: error: xml2-config not found. Please check your libxml2 installation.

1
# yum install libxml2-devel libxslt-devel

checking for PCRE headers location... configure: error: Could not find pcre.h in /usr

1
# yum install pcre-devel

configure: error: Please reinstall the BZip2 distribution

1
# yum install bzip2-devel

configure: error: mcrypt.h not found. Please reinstall libmcrypt.

1
# yum install libmcrypt-devel

configure: error: Please reinstall readline - I cannot find readline.h

1
# yum install readline-devel

以上。

proce55ingで画像処理
[]

2011.09.07

アプリ開発で画像処理が必要になりそうなので 久しぶりになんか作ってみる。

動画でやってみる。

1. pointllize

proce55ingって、ほんとに便利ですね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import processing.video.*;
Capture cap;

int pointillize = 16;

void setup()
{
  size(480, 320);
  background(0);
  cap = new Capture(this, width, height, 30);
}

void captureEvent(Capture cap) {
  cap.read();
}

void draw() {
  image(filter(), 0, 0);
}

PGraphics filter()
{
  loadPixels();
  cap.loadPixels();
  PGraphics pg = createGraphics(width, height, P3D);
  pg.beginDraw();
  pg.noStroke();
 
  for(int x=0; x<cap.width; x+=pointillize){
    for(int y=0; y<cap.height; y+=pointillize){
      int loc = x + y*cap.width;
      float r = red(cap.pixels[loc]);
      float g = green(cap.pixels[loc]);
      float b = blue(cap.pixels[loc]);
      pg.fill(r,g,b,255);
     
      pg.ellipse(x,y,pointillize,pointillize);
      //pg.rect(x,y,pointillize,pointillize);
    }
  }
 
  pg.endDraw();
  return pg;
}

2. pointllize2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// filter関数以外は全て(1)と同じ
// ... 省略
PGraphics filter()
{
  loadPixels();
  cap.loadPixels();
  PGraphics pg = createGraphics(width, height, P3D);
  pg.beginDraw();
  pg.noStroke();
 
  for(int i=0; i<100; i++){
    int x = int(random(cap.width));
    int y = int(random(cap.height));
    int loc = x + y*cap.width;
    float r = red(cap.pixels[loc]);
    float g = green(cap.pixels[loc]);
    float b = blue(cap.pixels[loc]);
    pg.fill(r,g,b,255);
    pg.ellipse(x,y,pointillize,pointillize);
  }
 
  pg.endDraw();
  return pg;
}

3. アウトライン化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// filter関数以外は全て(1)と同じ
// ... 省略
PGraphics filter()
{
  loadPixels();
  cap.loadPixels();
  PGraphics pg = createGraphics(width, height, P3D);
  pg.beginDraw();
  pg.noStroke();
 
  for(int x=0; x < width; x++){
    for(int y=0; y < height; y++){
      int loc = x + y * width;
        color pix = cap.pixels[loc];
      try{
        int leftLoc = (x-1) + y * width;
        color leftPix = cap.pixels[leftLoc];
       
        //float diff = abs(brightness(pix) - brightness(leftPix)) * 2;
        float r = abs(red(pix) - red(leftPix)) * 2;
        float g = abs(green(pix) - green(leftPix)) * 2;
        float b = abs(blue(pix) - blue(leftPix)) * 2;
       
        pg.pixels[loc] = color(r, g, b);
        pg.pixels[loc+1] = color(r, g, b);
        pg.pixels[loc-1] = color(r, g, b);
      }
      catch(Exception e){}
    }
  }
 
  pg.endDraw();
  return pg;
}

4. 2階調化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// filter関数以外は全て(1)と同じ
// ... 省略
PGraphics filter()
{
  int threshold = 100;
 
  loadPixels();
  cap.loadPixels();
  PGraphics pg = createGraphics(width, height, P3D);
  pg.beginDraw();
  pg.noStroke();
 
  for(int x=0; x < width; x++){
    for(int y=0; y < height; y++){
      int loc = x + y * width;

      if (brightness(cap.pixels[loc]) > threshold) {
        pg.pixels[loc]  = color(255);  // White
      }
      else {
        pg.pixels[loc]  = color(0);    // Black
      }
    }
  }
 
  pg.endDraw();
  return pg;
}

5. 移動平均法で平滑化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// smoothing operator

float[][] op = {
  {0.04, 0.04, 0.04, 0.04, 0.04}
  , {0.04, 0.04, 0.04, 0.04, 0.04}
  , {0.04, 0.04, 0.04, 0.04, 0.04}
  , {0.04, 0.04, 0.04, 0.04, 0.04}
  , {0.04, 0.04, 0.04, 0.04, 0.04}
};
int op_size = 5; // 5x5 matrix

/*
float[][] op = {
  {-1, -1, -1}
  , {-1, 9, -1}
  , {-1, -1, -1}
};
int op_size = 3; // 3x3 matrix
*/

import processing.video.*;
Capture cap;

void setup()
{
  size(480, 320);
  background(0);
  cap = new Capture(this, width, height, 30);
}

void captureEvent(Capture cap) {
  cap.read();
}

void draw() {
  image(filter(), 0, 0);
}

PGraphics filter()
{
  loadPixels();
  cap.loadPixels();
  PGraphics pg = createGraphics(width, height, P3D);
  pg.beginDraw();
  pg.noStroke();

  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++ ) {
      color c = convolution(x, y);
      int loc = x + y*cap.width;
      pg.pixels[loc] = c;
    }
  }
 
  pg.endDraw();
  return pg;
}

color convolution(int x, int y)
{
  float r = 0.0f;
  float g = 0.0f;
  float b = 0.0f;
  int offset = op_size / 2;
  for(int row=0; row<op_size; row++){
    for(int col=0; col < op_size; col++){
      int xloc = x+col-offset;
      int yloc = y+row-offset;
      int loc = xloc + cap.width*yloc;
      loc = constrain(loc,0,cap.pixels.length-1);
      r += (red(cap.pixels[loc]) * op[row][col]);
      g += (green(cap.pixels[loc]) * op[row][col]);
      b += (blue(cap.pixels[loc]) * op[row][col]);
    }
  }
 
  return color(r, g, b);
}

Core Data + PDF Kit で宛名面PDF作成アプリ
[]

2011.08.24

env

  • OS X 10.6.7
  • Xcode 4.0.2

key points

  • Core Data
    • Entities
      • Atene
        • address
        • name
        • postcode
        • title
    • NSArrayController
  • nib
    • NSTableView
  • PDF Kit(v10.4 or later)
    • PDFDocument
      • insertPage:atIndex
    • PDFPage
      • boundsForBox
      • drawWithBox

UI

refs

source

実績一覧

2011.08.17

準備中

OS X 10.5以降のフルスクリーン実装サンプル
[]

2011.08.14

OS X 10.5から追加された NSView の enterFullScreenMode:withOptions:、exitFullScreenModeWithOptions:を使ったフルスクリーンの実装サンプル。

環境

  • OS X 10.6.7
  • Xcode 4.0.2
  • ビルドターゲットのバージョンは10.5以降が必須。

1. 新規プロジェクト作成

  • Cocoa アプリケーションのプロジェクトテンプレートで新規プロジェクトを作成。

2. AppControllerクラスファイルの作成

  • AppController.h
  • AppController.m

3. MainViewクラスファイルの作成

  • MainView.h
  • MainView.m

4. IBでMainViewの配置と設定

  • XcodeのNavigator AreaからMainMenu.xibをクリックしてUI編集画面を表示する。
  • Object Libraryから「Object」をXcode の 「Dock」にドラッグアンドドロップ。
  • 配置したObjectをクリックして、インスペクタペインの「Custome Class」にMainViewと入力する。

5. IBでAppControllerの設定

  • XcodeのNavigator AreaからMainMenu.xibをクリックしてUI編集画面を表示する。
  • Object Libraryから「Object」をXcode の 「Dock」にドラッグアンドドロップ。
  • 配置したObjectをクリックして、インスペクタペインの「Custome Class」にAppControllerと入力する。
  • 「Assistant Editor ボタン」をクリックして、AppController.h に MainView をアウトレットとして接続する。

6. IBで「Full Screen」メニューアイテムの追加

  • XcodeのNavigator AreaからMainMenu.xibをクリックしてUI編集画面を表示する。
  • Object Libraryから「Menu Item」をメニュー「View」以下(別にどこでもよいけど)に配置する。
  • 配置した「Menu Item」を選択し、インスペクタペインの「Title」に「Full Screen」、「Key Equivalant」には「Cmd + F」を設定する。
  • 「Assistant Editor ボタン」をクリックして、AppController.h に向けて「Menu Item」からCtrl + クリックでアクションを接続する。アクション名はとりあえず「fullscreen」とする。

※ 「Cmd + F」は既に他のメニューアイテムによって使われているので、とりあえず、「View」以外のメニューは削除しておくか、フルスクリーンのキーボードショートカットを「Cmd + F」以外にする必要がある。

7. MainViewクラスの実装

  • MainView.h
1
2
3
4
5
#import <Foundation/Foundation.h>

@interface MainView : NSView
{}
@end
  • MainView.m
1
2
3
4
#import "MainView.h"

@implementation MainView
@end

8. AppControllerクラスの実装

  • AppController.h
1
2
3
4
5
6
7
8
9
10
#import <Foundation/Foundation.h>

@class MainView;

@interface AppController : NSObject
{
    IBOutlet MainView *mainView;
}
- (IBAction)fullscreen:(id)sender;
@end
  • AppController.m
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#import "AppController.h"

@implementation AppController

#pragma - menu

- (IBAction)fullscreen:(id)sender
{
    NSLog(@"isInFullScreenMode: %i", [mainView isInFullScreenMode]);
    NSDictionary *fullscreenOptions = [NSDictionary dictionaryWithObject:[NSNumber numberWithBool:YES] forKey:NSFullScreenModeSetting];
   
    if([mainView isInFullScreenMode]){
        [mainView exitFullScreenModeWithOptions:fullscreenOptions];
    }
    else{
        [mainView enterFullScreenMode:[NSScreen mainScreen] withOptions:fullscreenOptions];
    }
   
    // mainViewをFirst Responderにすることで、フルスクリーン表示後にキーボードイベントを受け取れるようにする。
    // でないと、ショートカットキー(Cmd + F)でフルスクリーンを解除できなくなる。
    [[mainView window] makeFirstResponder:(NSResponder *)mainView];
}
@end

ソース

その他

Flex + actionscript3 でスライドショー
[]

2011.07.29

スライドショーの作例。

開発環境

  • OS X 10.6.2
  • flex_sdk_4.1.0.16076
  • rascut 0.2.1

rascutを使っての環境構築の記事:http://d.hatena.ne.jp/nitoyon/20070914/how_to_install_rascut

key points

  • そうめん(擬似thread)を使わせてもらいました。
  • Tweener
  • XMLで動きを定義しています。

デモ

ソース

ドラッグアンドドロップで
ファイルアップロードできるサービス

[]

2011.05.09

を作ってみました。Safari、Firefox、Chromeだとたぶん動く、IEだと動かない。

screen shot:

主な構成要素

  • CodeIgniter 2.0
  • Doctrine
  • MySQL
  • Flash
  • jQuery

CodeIgniter 2.0 の新機能、変更点など
[]

2011.02.05

CodeIgniter 2.0 のブランチ

  • http://d.hatena.ne.jp/Kenji_s/20110129/1296265837
  • CodeIgniter Core
    • CIの開発元であるEllisLab の商用製品( Such as ExpressionEngine and MojoMotor )で使用されるブランチ
  • CodeIgniter Reactor
    • これがオープンソースコミュニティのためのメインブランチ。
    • CI コミュニティで育てていくためのブランチ。
    • 新機能、バグフィックス、改良、ドキュメンテーションの整備はこちらで行なわれる。
    • EllisLabによる CodeIgniter Core の成果物もこちらにマージされていく。

大きな変更点、新機能

  • PHP 4 サポートの廃止。今後は PHP 5.1 以上が必須要件となる。
  • フォームヘルパーでのCSRFプロテクション
  • Drivers
    • CodeIgniter 2.0 In Progress – The Critical Changes, Implications, and What You Should Know
    • Guide to CodeIgniter Drivers
    • ドライバーとはライブラリーの一種。
    • コントローラにライブラリ使用のためのエレガントなシンタックスを提供する。
    • adapter パターン + decorator パターン
    • Caching
      • $this->load->driver('cache');
      • $this->cache->memcached->save('foo', 'bar', 10);
      • $this->cache->apc->save('foo', 'bar', 10);
      • Cache_memcachedクラスからその親クラスであるCacheクラスにアクセスすることはできるが、
      • Cache_memcachedからCache_apcにアクセスするこはできない => クラスの機能を明確に分離する。
    • Database
    • Javascript
  • Application Packages
    • コンフィグファイル、ヘルパー、言語ファイル、ライブラリ、モデルといった アプリケーションに必要なコードを単一ディレクトリで構成することができる機能。プラグインのような感じで配布することが容易になる。
    • $this->load->add_package_path(APPPATH.'third_party/foo_bar/');
    • $this->load->library('foo_bar');
    • http://codeigniter.com/user_guide/libraries/loader.html
  • Scaffoldingの廃止。
  • Validationクラスは削除されました。=> Form Validationクラスを使う。
  • 今までのPlugin機能の削除。ヘルパーを使ってね。
  • Added routing overrides to the main index.php file, enabling the normal routing to be overridden on a per “index” file basis.
    • メインのindex.phpファイルを上書きするルーティングが追加されたので、通常のルーティングを有効にするには各"index"ファイルを上書きする。(よくわかんね)
  • 404ページをコントローラで制御するために$route[‘404_override’]を追加しました。
  • 50以上のバグフィックス。

Reactor には上記のものすべてに加え、以下のナイスな独自変更を含んでいる(以下のものはCoreには含まれないという意味だろう):

  • GETクエリ文字列の完全なサポート。
  • base_urlがブランクなら自動的に探知する。
  • ファイルシステムによる新しいキャッシュドライバー、APCとmemcacheのサポート
  • 簡単なcronジョブのためのコマンドラインに対応する。
  • 20以上の調整と改善。

すべての変更点はchange logをご覧あれ

コアクラスの拡張

コアクラス(system/core 内の CI_Controller など)の拡張クラス(MY_Controller)は

  • application/core

に配置する必要がある。 つまり application/libraries/MY_Controller.php は、application/core/MY_Controller.php に移動する必要がある。

system/libraries 内のクラスの拡張は 今まで通り application/libraries に配置してOK

XULRunnerでページ読み込みメーターを実装する
[]

2011.01.27

参考リンク

ポイント

  • (1). browser.xulに を配置する。
  • (2). nsIWebProgressListenerインターフェースを実装したオブジェクトを作成する。
  • (3). (2)で作成したオブジェクトを gBrowser.addProgressListener でgBrowserにセットする。

(1). browser.xul の一部

1
2
3
4
5
6
7
8
<!-- ... -->
    <browser type="content" flex="1" id="content"/>
<!-- ... -->
    <statusbarpanel class="statusbarpanel-progress" collapsed="true" id="statusbar-progresspanel">
         <image src="chrome://yobrowser/content/throbber.gif" id="throbber-image"/>
         <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/>
    </statusbarpanel>
<!-- ... -->

(2)(3). MyProgressListenerの実装とセット

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var gBrowser = null;
var gProgressMeterPanel = null;

function BrowserStartup()
{
  // ....
  gBrowser = document.getElementById("content");
  gProgressMeterPanel = document.getElementById("statusbar-progresspanel");
  gBrowser.addProgressListener(MyProgressListener, Components.interfaces.nsIWebProgress.NOTIFY_ALL);
  // ....
}

var MyProgressListener = {
  , statusMeter: null    // progressmeter
  , QueryInterface: function(aIID) {
      if (aIID.equals(Components.interfaces.nsIWebProgressListener) ||
          aIID.equals(Components.interfaces.nsISupportsWeakReference) ||
          aIID.equals(Components.interfaces.nsISupports))
            return this;
          throw Components.results.NS_NOINTERFACE;
  }
  , onProgressChange : function (aWebProgress, aRequest,
                               aCurSelfProgress, aMaxSelfProgress,
                               aCurTotalProgress, aMaxTotalProgress)
  {
    if (aMaxTotalProgress > 0) {
      var percentage = (aCurTotalProgress * 100) / aMaxTotalProgress;
      this.statusMeter.value = percentage;
    }
  }
  , onStateChange: function (aWebProgress, aRequest, aStateFlags, aStatus)
  {
    const nsIWebProgressListener = Components.interfaces.nsIWebProgressListener;
    const nsIChannel = Components.interfaces.nsIChannel;

    if(aStateFlags & nsIWebProgressListener.STATE_START && aStateFlags & nsIWebProgressListener.STATE_IS_NETWORK){
      dump("読み込み開始");
     
      var location = aRequest.QueryInterface(nsIChannel).URI;
      gProgressMeterPanel.collapsed = false;
     
      this.statusMeter = document.getElementById("statusbar-icon");
      this.statusMeter.value = 0;
    }
    else if (aStateFlags & nsIWebProgressListener.STATE_STOP && aStateFlags & nsIWebProgressListener.STATE_IS_NETWORK) {
      dump("読み込み終了");
      gProgressMeterPanel.collapsed = true;
    }
  }
  , onLocationChange: function (aWebProgress, aRequest, aLocationURI)
  {}
  , onStatusChange: function (aWebProgress, aRequest, aStatus, aMessage)
  {}
  , onSecurityChange: function (aWebProgress, aRequest, aState)
  {}
}

jquery.summary.js
[]

2011.01.15

指定したセレクタ内の h1...h6 からTOCを生成する。デフォルトでは <div id="summary"></div> 内に生成される。

download

ソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
;(function($){
  var namespace = "createSummary";
  $.fn[namespace] = function(config) {
    var config = $.extend({
      where:'#summary'
    }, config);
    var target = this;
    $(config.where).append('<ul></ul>');
    var ul = '<ul style="margin-left:2em;"></ul>';
    var h = $(target).find('h1, h2, h3, h4, h5, h6');
    function getN(ele)
    {
      ele.nodeName.match(/(\d)/i);
      return RegExp.$1;
    }
   
    $.each(h, function(i, v)
    {
      var n = getN(v);
      var t = 'h'+n+'-'+i;
      var li = '<li>' + '<a href="#' + t + '">' + $(v).text() + '</a>' + '</li>';
     
      $(v).append('<a name="' + t + '"></a>');
     
      if(i <= 0){
        $(config.where + " ul:last").append(li);
      }
      else{
        var p_n = getN(h[i-1]); // prev n
       
        if(n < p_n){
          $(config.where + " ul:last").parents('ul:last').append(li);
        }
        else if(n > p_n){
          $(config.where + " li:last").append(ul);
          $(config.where + " ul:last").append(li);
        }
        else{
          $(config.where + " li:last").after(li);
        }
      }
    });
  };
})(jQuery);

使い方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script type="text/javascript">
jQuery(function($){
  // div.entry 内の見出しタグ(h1 ... h6)から div#summary 内にTOCを生成
  $("div.entry").createSummary();
});
</script>
</head>
<body>

<div id="summary"></div>

<div class="entry">
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <h3>見出し3</h3>
</div>

</body>