2012年02月12日

Movable Typeでのログイン機能実装

MovableTypeでログイン機能を実装する方法を考える。
ブログ記事管理を通常の MT 管理画面上でいつもどおりに行えるようにしたい。
つまり、MT 管理画面上での:
  • ブログ記事の投稿や変更
  • テンプレートの改変
が公開される記事に反映されるようにしたい。

いろいろな方法があると思うが、以下のような仕組みを考えた:
  • ログインが必要なコンテンツは、別ブログに分ける。
  • ブログ記事、ウェブページはウェブ上に公開されない場所に保存させる。
  • ブログ記事は PHP スクリプトから読み出して表示させる。
     (PHP スクリプト上でユーザー認証を行うことで、ログイン機能を実現)
  • PHP 用のテンプレートはウェブページで作成する。
     (ウェブページのデザインテンプレートでデザインを変更できる)

以下、具体的な方法を説明する。

使用した MT バージョンは 5.12-ja。

ブログの作成

ログインを必要とするコンテンツ用のブログを作成する。
その際、[ブログパス] は [絶対パス] にチェックを入れ、ウェブ上に公開されないパスを指定する。

ブログの設定で、
「全般設定」
  • 「アーカイブ設定」-> [ファイルの拡張子] を "tpl" に変更 (これは好みに応じて)
「投稿設定」
  • 「作成の既定値」-> [テキストフォーマット] を "なし" に変更
とする。

デザインテンプレート整備

デザインの「ブログテンプレートの管理」画面で、以下のような設定を行う。
ウェブページテンプレート改変
アーカイブテンプレートの「ウェブページ」テンプレートを改変する。

ウェブページは PHP のデザインテンプレートとして使用するため、ところどころ PHP コードに置き換える必要がある。
ページタイトル
<title><$mt:PageTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title>
の部分は記事ごとに変える必要があるので、たとえば
<title><?php echo htmlspecialchars($page_title); ?> - <$mt:BlogName encode_html="1"$></title>
のようにする。

PHP のデザインテンプレートは「ブログ記事」「カテゴリページ」など複数用意することになるので、「ウェブページ」テンプレートはそれらに共通して使えるようにする。
ブログ記事テンプレート改変
アーカイブテンプレートの「ブログ記事」テンプレートを改変する。

ブログ記事は PHP スクリプトから読み出される記事データベース的役割をする。
そのため、読み出しに適した単純な書式で各記事詳細を書き込むようにする。
たとえば:
<$mt:CategoryLabel$>
<$mt:EntryTitle$>
<$mt:EntryDate$>
<$mt:EntryBody$>
など。
今回は議論しないがコメントとタグもブログ記事に書き出すようにする。

また、ブログ記事の URL から記事 ID がわかるように、アーカイブマッピングで [パス] のファイル名部分を %-f から <$MTEntryID$>.html に変更する。
ブログ記事リストテンプレート改変
カテゴリ別や月別のブログ記事リストのテンプレートを改変する。

ブログ記事リストも PHP から読み出されるので、読み出しに適した書式にする。
たとえば:
<mt:Entries limit="$limit">
<$MTEntryDate format="%Y/%m"$>/<$MTEntryID$>:<$MTEntryTitle$>
</mt:Entries>
などとする。

また、アーカイブマッピングの [パス] で、
  • %iindex.html に、
  • %-c%c に、
  • 拡張子を .tpl から .html に、
変更する。
カテゴリリストテンプレート追加
アーカイブテンプレートに、カテゴリリストを出力する「ブログ記事リスト」を追加する。

たとえば、
<MTCategories>
<$MTCategoryBasename$>:<$MTCategoryLabel$>
</MTCategories>
など。

これは、メインインデックスを出力する際に使用する。
インデックステンプレート変更
メインインデックスは直接アクセスしないので削除する。
JavaScript、CSS は [パス] に絶対パスを指定する。
ほか、不要な物は削除。

ウェブページで PHP テンプレート作成

たとえば、以下のようなテンプレートをウェブページとして作成する。
ログイン画面用テンプレート
ファイル名: login.tpl
<h2>ログイン</h2>
<form name="form1" action="/members/index.html" method="post">
<table>
<tr>
<td>メールアドレス</td>
<td><input type="text" name="li_mail" value="<?php echo htmlspecialchars($mail); ?>"/></td>
</tr>
<tr>
<td>パスワード</td>
<td><input type="password" name="li_passwd" value=""/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="ログイン" /></td>
</tr>
</table>
</form>
メインインデックス用テンプレート
ファイル名: index.tpl
<h2>会員用ページ</h2>
<div class="members">
<?php
foreach ($categories as $category) {
?>
<div><a href="<?php echo htmlspecialchars($category['basename']); ?>/"><?php echo htmlspecialchars($category['label']); ?></a></div>
<?php
}
?>
</div>
カテゴリ別ブログ記事リスト用テンプレート
ファイル名: category.tpl
<h2><?php echo htmlspecialchars($category_label); ?></h2>
<div class="members">
<?php
foreach ($entries as $entry) {
?>
<div><a href="<?php echo htmlspecialchars($entry['path']); ?>.html"><?php echo htmlspecialchars($entry['title']); ?></a></div>
<?php
}
?>
</div>

PHPスクリプトの作成

ページを表示するための PHP スクリプトを用意する。
PHP スクリプトは、記事IDまたはカテゴリIDからブログ記事ファイルのパスを決定し、ファイルの内容を読み出し、デザインテンプレートを選んで表示する処理を行う。

以下の PHP コードはその一例で、view.php というファイル名で対象パス (DocumentRoot/members など) に置く。
<?php
/**
* ページ表示
*
* 入力パラメータ
* c -- 'index' / カテゴリのベースネーム
* y -- 記事年
* m -- 記事月
* e -- 記事番号
* 組み合わせは以下のいずれか
* view.php?c=index
* view.php?c=cat
* view.php?y=2012&m=01&e=00123
*/
// ブログの [ブログパス] で設定したパスを指定
define('MEMBERS_BASEDIR', '/var/www/members');
if (!auth()) {
require MEMBERS_BASEDIR . '/login.tpl';
exit;
}
// 表示ページの決定
if (isset($_REQUEST['c']) && $_REQUEST['c'] != '') {
$category_basename = $_REQUEST['c'];
}
if (isset($_REQUEST['e']) && $_REQUEST['e'] != ''
&& isset($_REQUEST['m']) && $_REQUEST['m'] != ''
&& isset($_REQUEST['y']) && $_REQUEST['y'] != '') {
$entry_year = $_REQUEST['y'];
$entry_month = $_REQUEST['m'];
$entry_id = $_REQUEST['e'];
if (!preg_match('/^\d{4}$/', $entry_year)) {
echo "ERR(1)";
exit;
}
if (!preg_match('/^\d{2}$/', $entry_month)) {
echo "ERR(1)";
exit;
}
} else {
$entry_year = '';
$entry_month = '';
$entry_id = '';
}
} else {
echo "ERR(2)";
exit;
}
// 記事の内容
if ($entry_id != '') {
// 個別の記事
$entry_fname
= MEMBERS_BASEDIR . "/$entry_year/$entry_month/$entry_id.html";
if (!file_exists($entry_fname)) {
echo "ERR(3)";
exit;
}
if (($fh = fopen($entry_fname, 'r')) === FALSE) {
echo "ERR(4)";
exit;
}
flock($fh, LOCK_SH);
$category_label = trim(fgets($fh));
$entry_title = trim(fgets($fh));
$entry_date = trim(fgets($fh));
$entry_contents = '';
while ($row = fgets($fh)) {
$entry_contents .= $row;
}
fclose($fh);
$page_title = $entry_title;
} else if ($category_basename == 'index') {
// インデックス
$categireis = array();
if (($fh = fopen(MEMBERS_BASEDIR . '/categories', 'r')) === FALSE) {
echo "ERR(5)";
exit;
}
flock($fh, LOCK_SH);
while ($row = fgets($fh)) {
$row = trim($row);
if ($row != '') {
list($cbn, $cl) = explode(':', $row, 2);
$categories[] = array('basename' => $cbn,
'label' => $cl);
}
}
fclose($fh);
$page_title = '会員用ページ';
} else {
// カテゴリ
$categirey_label = '';
if (($fh = fopen(MEMBERS_BASEDIR . '/categories', 'r')) === FALSE) {
echo "ERR(5)";
exit;
}
flock($fh, LOCK_SH);
while ($row = fgets($fh)) {
if (preg_match("/^$category_basename:(.+)$/", $row, $matches)) {
$category_label = $matches[1];
break;
}
}
fclose($fh);
if ($category_label == '') {
echo "ERR(6)";
exit;
}
$entries = array();
if (($fh = fopen(MEMBERS_BASEDIR . "/$category_basename/entries", 'r'))
=== FALSE) {
echo "ERR(7)";
exit;
}
flock($fh, LOCK_SH);
while ($row = fgets($fh)) {
$row = trim($row);
if ($row != '') {
list($p, $t) = explode(':', $row, 2);
$entries[] = array('path' => $p,
'title' => $t);
}
}
fclose($fh);
$page_title = $category_label;
}
if ($entry_id != '') {
require MEMBERS_BASEDIR . '/entry.tpl';
} else if ($category_basename == 'index') {
require MEMBERS_BASEDIR . '/index.tpl';
} else {
require MEMBERS_BASEDIR . '/category.tpl';
}
function auth()
{
// ここで認証処理行う
return TRUE;
}
?>

Rewrite設定

Apache の Rewrite エンジンを利用して、ブログ記事や記事リストへのアクセスを view.php にパラメータをつけて転送する。

設定例:
RewriteEngine On
RewriteRule ^index\.html view.php?c=index [L]
RewriteRule ^([^/]+)/([^/]+)/([^/]+)\.html view.php?y=$1&m=$2&e=$3 [L]
RewriteRule ^([^/]+)/index\.html view.php?c=$1 [L]

以上で設定は完了。
タグ:MovableType PHP
posted by K/I at 08:55 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2011年12月03日

ApacheのログをMySQLにはき出す

Apacheのログファイルからアクセス解析するツールを作っていたのだが、アクセス数が多いサイトなのでログファイルのファイルサイズが大きく、読み出してデータベースに書き出すだけで一苦労。
何かよい工夫は無いものか。。。
と思っていたら、こんなものがあった。

mod_log_sql
http://www.outoforder.cc/projects/apache/mod_log_sql/

Apache ログを直接 MySQL に書き出してくれるらしいので、導入してみた。
環境は以下のとおり:

OS: CentOS 5.6
Apache: 2.2.3
MySQL: Ver 14.12 Distrib 5.0.77
mod_log_sql: 1.101

1. インストール


ファイルをダウンロード&解凍して configure
で、いきなりつまずいた。

$ ./configure --with-apxs=/usr/sbin/apxs
configure: creating config.nice
checking for gcc... gcc
checking for C compiler default output... a.out
checking whether the C compiler works... yes
checking whether we are cross compiling... no
checking for suffix of executables...
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether gcc accepts -g... yes
checking for gcc option to accept ANSI C... none needed
checking build system type... x86_64-unknown-linux-gnu
checking host system type... x86_64-unknown-linux-gnu
checking target system type... x86_64-unknown-linux-gnu
checking for Apache 2.0 version >= 2.0.40... yes
checking for floor in -lm... yes
checking for gzclose in -lz... yes
checking for mysql_init in -lmysqlclient... no
configure: error: libmysqlclient is needed for MySQL support


libmysqlclient が見つからないなら、パスを指定して:
$ ./configure --with-apxs=/usr/sbin/apxs --with-mysql=/usr/lib64/mysql
とすればいい、と思ったが状況改善しない。

調べてみたらこんな記事が:
configure: error: libmysqlclient is needed for MySQL support
http://www.webhostingtalk.com/showthread.php?t=519406

言われるままに:
$ ln -s /usr/lib64/mysql /usr/lib/mysql
$ ./configure --with-apxs=/usr/sbin/apxs

としたらうまくいった。

あとはお決まりの:
$ make
# make install

でインストール完了。

2. MySQLデータベースの準備


ログの格納先データベースを準備する。

$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 6781031
Server version: 5.0.77-log Source distribution

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> create database apachelogs;
Query OK, 1 row affected (0.09 sec)

mysql> \u apachelogs
Database changed
mysql> \. mod_log_sql-1.101/contrib/create_tables.sql
Query OK, 0 rows affected (0.12 sec)

Query OK, 0 rows affected (0.05 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.10 sec)

Query OK, 0 rows affected (0.01 sec)

mysql> SHOW TABLES;
+----------------------+
| Tables_in_apachelogs |
+----------------------+
| access_log |
| cookies |
| headers_in |
| headers_out |
| notes |
+----------------------+
5 rows in set (0.00 sec)

mysql> CREATE USER apachelogs_user IDENTIFIED BY 'XXXXXXXXXX';
Query OK, 0 rows affected (0.60 sec)

mysql> GRANT INSERT ON apachelogs.* TO 'apachelogs_user'@'localhost'
Query OK, 0 rows affected (0.45 sec)


3. Apache の設定


データベースの準備ができたら、次は Apache の設定。

LoadModule log_sql_module modules/mod_log_sql.so
LoadModule log_sql_mysql_module modules/mod_log_sql_mysql.so
LogSQLLoginInfo mysql://apachelogs_user:XXXXXXXXXX@localhost/apachelogs

<VirtualHost aaa.bbb.ccc.ddd:80>
ServerName www.xxx.yyy
LogSQLTransferLogTable access_log
CustomLog logs/access_log combined
ErrorLog logs/error_log
</VirtualHost>


バーチャルホストごとに書出し先テーブルを指定できるようになっている。

Apache を再起動。

# service httpd graceful

設定が反映される。
ログは、ログファイルとデータベースの両方にはき出される。
posted by K/I at 20:31 | 東京 ☁ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2011年04月07日

Redmineのインストール

これまで trac を使っていたが、Redmine を使ってみることにした。
以下、インストールメモ。
Ver.2.x のインストールメモは「Redmineのインストール (Ver.2.x)」を参照

インストールした環境は、Fedora 14。
インストールした Redmine のバージョンは 1.1.2。

Redmine.JP に掲載されているインストール手順を参考に作業した。
http://redmine.jp/guide/RedmineInstall/

(1) 必要なツール類のインストール
Ruby, Rails, Rack のバージョンは、記載されているバージョンと完全に一致していないといけないようだ。

Fedora 14 のパッケージは、Rails と Rack のバージョンが一致しなかった。
今回、Redmine の公式リリース版をダウンロードしたが、Rails は Redmine のファイル一式に含まれていたが、Rack は含まれていなかったので必要なバージョンを gem でインストールした。
gem install rack -v=1.0.1

(2) Redmine 用アカウント作成

Redmine 用アカウント redmine を作成。

# useradd redmine

(3) データベースの準備

データベースは、今回は PostgreSQL を使用した (使い慣れているので)。

Redmine 用のロールとデータベースを作成する。

CREATE ROLE redmine LOGIN ENCRYPTED PASSWORD 'パスワード' NOINHERIT VALID UNTIL 'infinity';
CREATE DATABASE redmine WITH ENCODING='UTF8' OWNER=redmine;


そして、redmine をインストールするサーバーからのアクセスを許可させる。
同一ホストであっても、ローカルからのアクセスが ident メソッドのみになっている場合は、自IPアドレスから password メソッドでの host アクセスを許可させておく (/var/lib/pgsql/data/pg_hba.conf および /var/lib/pgsql/data/postgresql.conf を設定)。

(4) ダウンロード

以下のサイトから、Redmine のファイルをダウンロード。
http://www.redmine.jp/download/

レポジトリからチェックアウトもできるが、上述のとおり Rails の必要バージョンが含まれているという理由から、tar ファイルをダウンロードした。

tar ファイルを適当なところ (たとえば /usr/local の下とか) に解凍し、オーナーを redmine にする (←オーナー変更は必要なかったかも)。

# chown -R redmine: redmine-1.1.2

(5) セッションストア秘密鍵の生成

redmine アカウントでログインし、解凍したディレクトリ (たとえば、/usr/local/redmine-1.1.2。以下、Redmine ディレクトリと呼ぶ) に移動し、以下のコマンドを実行する。

# rake config/initializers/session_store.rb

(6) テーブル作成

解凍ファイルの中にある config/database.yml.exampleconfig/database.yml にコピーし、production: のところの内容を変更する。
production:
  adapter: postgresql
  database: redmine
  host: IPアドレスかホスト名
  username: redmine
  password: "redmine ロールのパスワード"


そして、Redmine ディレクトリで、以下のコマンドを実行:

rake db:migrate RAILS_ENV="production"
rake redmine:load_default_data RAILS_ENV="production"

redmine データベース内にテーブル等が作られる。

(7) 動作確認

以下のコマンドを実行してWebサーバーを起動:

# ruby script/server webrick -e production

http://localhost:3000/ にアクセスして Welcome 画面が表示されるか確認する。

(8) Passenger (mod_rails) を導入

Redmin.JP サイトに webrick は「開発用」なので「動作確認以外には使用するな」という脅し文句が書かれているので、Passenger をインストールしてみる。
まずは、必要なパッケージをインストール。
# yum install rubygem-fastthread
# yum install rubygem-daemons

場合によってはほかのパッケージが必要かもしれない。
Passenger 自体は rpm が用意されていなかったので、gem でインストール。
# gem install passenger
Passenger Apache 2モジュールのインストーラーを実行。
# passenger-install-apache2-module
ところが、なぜか
/usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/lib/phusion_passenger/platform_info/apache.rb:277:in `_unmemoized_apr_config_needed_for_building_apache_modules?': undefined local variable or method `test_exe_outdir' for PhusionPassenger::PlatformInfo:Module (NameError)
        from /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/lib/phusion_passenger/platform_info.rb:92:in `apr_config_needed_for_building_apache_modules?'
        from /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/bin/passenger-install-apache2-module:69:in `dependencies'
        from /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/lib/phusion_passenger/abstract_installer.rb:166:in `check_dependencies'
        from /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/bin/passenger-install-apache2-module:90:in `install!'
        from /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/lib/phusion_passenger/abstract_installer.rb:63:in `start'
        from /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/bin/passenger-install-apache2-module:236
        from /usr/bin/passenger-install-apache2-module:19:in `load'
        from /usr/bin/passenger-install-apache2-module:19

とかいうエラーが出てうまくいかない。
これはどうやら、typoらしい。
/usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/lib/phusion_passenger/platform_info/apache.rb を開き、"test_exe_outdir" を "tmpexedir" に変更してリトライ。
不足しているソフトウェアを提示してくれる (しかも、実行すべき yum コマンドまで教えてくれる!) ので、インストール後再実行。
起動できた。

(9) Apache 設定

Apache に Passenger の設定を追加。
たとえば、/etc/httpd/conf.d/passenger.conf を作成して、passenger-install-apache2-module 実行時に表示された設定を記載する。
今回の環境では以下のとおり:
LoadModule passenger_module /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6/ext/apache2/mod_passenger.so
PassengerRoot /usr/lib/ruby/gems/1.8/gems/passenger-3.0.6
PassengerRuby /usr/bin/ruby


次に、Redmine の設定を行う。
ポート 20080 にアクセスするとRedmineが表示されるようにVirtualHost設定することにした。
たとえば /etc/httpd/conf.d/redmine.conf に記載する。
今回の環境では以下のようにする:
Listen 20080
NameVirtualHost *:20080
<VirtualHost *:20080>
    ServerAdmin webmaster@aaa.bbb.ccc
    DocumentRoot /usr/local/redmine-1.1.2/public
    CustomLog /var/www/vhosts/logs/redmine_ssl_access-log combined
    LogLevel warn
    ErrorLog /var/www/vhosts/logs/redmine_ssl_error-log
</VirtualHost>

そして、Redmine ディレクトリのオーナーを apache:apache に変更する。
今回の環境では:
# chown -R apache: /usr/local/redmine-1.1.2

Apacheを再起動すると、http://localhost:20080/ でアクセスできる。

(10) メール送信設定

プロジェクトで発生したイベントをメールで送信するようにするには、Redmine ディレクトリの config/email.yml.exampleconfig/email.yml にコピーし、設定変更する。
たとえば localhost を SMTP サーバーにするには、production: のところを
production:
  delivery_method: :smtp
  smtp_settings:
    address: localhost
    port: 25
    domain: メールドメイン名

のように設定する。
タグ:redmine
posted by K/I at 21:20 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年11月01日

電子証明書によるクライアント認証 (Apache)

銀行の企業向けインターネットバンキングなどで、よく「デジタル証明書」を使ってユーザー認証しているものがあるが、あれはどうやっているのだろうか?
ちょっと調べてみた。

Web サーバーが信頼する CA から発行した証明書を保有するクライアント (Webブラウザ) のみを信頼する、というのが「クライアント認証」の考え方のようだ。

ここでは、CA は自前で用意してあるものとする。
以下、以前まとめた下の関連記事の設定を前提に話を進める。
【関連記事】
PKI の認証局(CA)を構築する

【Webサーバー側】

(1) 信頼する CA の設定

まず、信頼する CA の一覧を設定する。
CA から、CA 証明書 (cacert.pem) を受け取り、Apache に以下のように設定する。
SSLVerifyClient require
SSLCACertificateFile cacert.pem のパス

複数の CA 証明書がある場合には、ディレクトリで指定できる。
SSLVerifyClient require
SSLCACertificatePath CA 証明書の設置ディレクトリ

設定したら Apache を再起動する。

(2) 秘密鍵+証明書署名要求ファイルの作成

※この処理は、Web サーバーで行うのか、CA で行うのか、あるいはクライアント側で行うのかは、サービスの運営方針によるのではないか? と思う。
クライアントの秘密鍵と証明書署名要求 (CSR) の両方を含む PEM 形式のファイルを作成する。
Country Name などに入力する値は、CA のものに合わせる。
# openssl req -new -keyout user01.pem -out user01.pem
Generating a 2048 bit RSA private key
.........+++
...+++
writing new private key to 'user01.pem'
Enter PEM pass phrase:
Verifying - Enter PEM pass phrase:
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:Tokyo
Locality Name (eg, city) [Default City]:Shinjuku-ku
Organization Name (eg, company) [Default Company Ltd]:K-ISHIK
Organizational Unit Name (eg, section) []:
Common Name (eg, your name or your server's hostname) []:k.ishikawa
Email Address []:k-ishik@camel.zoo.park

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:


なお、CA 証明書 の内容は以下のようなコマンドで表示できる。
# openssl x509 -in CA証明書ファイル -text

【CA側】
以下の (3)、(4) の手順で、PKCS #12 形式のクライアント証明書を発行する

(3) 署名付き秘密鍵ファイルの作成

作成した秘密鍵+証明書署名要求を CA にコピーし、証明書ファイルを作成する。
# openssl ca -in user01.pem -keyfile /etc/pki/CA/private/cakey.pem \
-cert /etc/pki/CA/cacert.pem -out user01.crt
Using configuration from /etc/pki/tls/openssl.cnf
Enter pass phrase for /etc/pki/CA/private/cakey.pem:
Check that the request matches the signature
Signature ok
Certificate Details:
Serial Number: 14 (0xe)
Validity
Not Before: Oct 31 15:05:37 2010 GMT
Not After : Oct 31 15:05:37 2011 GMT
Subject:
countryName = JP
stateOrProvinceName = Tokyo
organizationName = K-ISHIK
organizationalUnitName =
commonName = k.ishikawa
emailAddress = k-ishik@camel.zoo.park
X509v3 extensions:
X509v3 Basic Constraints:
CA:FALSE
Netscape Comment:
OpenSSL Generated Certificate
X509v3 Subject Key Identifier:
A7:EC:D2:85:9F:59:4A:A0:B4:96:81:F6:68:5B:D8:49:69:81:7E:FA
X509v3 Authority Key Identifier:
keyid:2B:45:1F:EE:3B:DF:57:65:41:24:C9:04:53:AD:F1:B5:BA:80:D6:DA

Certificate is to be certified until Oct 31 15:05:37 2011 GMT (365 days)
Sign the certificate? [y/n]:y


1 out of 1 certificate requests certified, commit? [y/n]y
Write out database with 1 new entries
Data Base Updated

これにより、PEM 形式の証明書ファイル user01.crt が作成される。

(4) PKCS #12 形式の証明書ファイルの作成

秘密鍵+証明書署名要求ファイルと PEM 形式の証明書ファイルから PKCS #12 形式の個人証明書を作成する。
# openssl pkcs12 -export -clcerts -in user01.crt -inkey user01.pem \
-out user01.p12
Enter pass phrase for user01.pem:
Enter Export Password:
Verifying - Enter Export Password:


【クライアント側】

(5) 証明書のインポート

CA (または、Web サーバー経由で) PKCS #12 形式の個人証明書 user01.p12 をクライアント PC にコピーし、ブラウザにインポートする。
(以下、Internet Explorer 7 の場合)
  1. [ツール] メニューの [インターネットオプション] の [コンテンツ] タブで、[証明書] ボタンをクリックする。
    電子証明書のインストール#1
  2. "証明書" 画面の [個人] タブで、[インポート] ボタンをクリックする。
    電子証明書のインストール#2
  3. "証明書のインポート ウィザード" が起動する。[次へ] をクリックする。
    電子証明書のインストール#3
  4. [ファイル名] 欄に個人証明書のパスを設定し、[次へ] ボタンをクリックする。
    電子証明書のインストール#4
  5. [パスワード] 欄に、手順 (4) で入力した Export Password を入力する。
    [秘密キーの保護を強力にする] にチェックを入れると、ブラウザ起動後最初に対象サイトにアクセスするたびにパスワードの入力を求められる。
    [このキーをエクスポート可能にする] にチェックを入れると、"証明書" 画面でキーのエクスポートができるようになる。
    電子証明書のインストール#5
  6. あとは、指示に従って処理する。
    電子証明書のインストール#6
    電子証明書のインストール#7

以上で、設定は完了。
クライアント認証するように設定した URL にアクセスすると、"デジタル証明書の選択" ダイアログが表示される。
電子証明書のインストール#8
インストールした証明書を選択して [OK] をクリックすればアクセスできる。
タグ:PKI CA
posted by K/I at 01:16 | 東京 ☔ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年08月01日

HTML5 のフォーム関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
●参考
4.10 Forms - HTML5

追加されたフォーム関連要素

要素 カテゴリ タグ内に含むもの 説明
datalist flow content
phrasing content
phrasing content
または
0 個以上の option 要素
input 要素で使われる選択肢を定義する。
output flow content
phrasing content
listed, labelable, and resettable
form-associated element
phrasing content 計算結果を表す。
計算自体は、JavaScript などを使って処理する。

変更された属性 (グローバル属性を除く)

要素名 属性名 説明
form novalidate ブール属性。
指定すると、サブミットの際にフォームの正当性チェックが行われない。
fieldset form 関連づけされる form 要素の ID を指定する。
デフォルトでは、すぐ上のレベルの form 要素に関連づけされる。
disabled 指定すると、子ノードのフォーム・コントロールが無効状態になる (最初の legend 要素を除く)。
input type 以下の値が追加された。
search
text とほぼ同様。
プラットフォームによっては、検索フィールドが通常の入力欄と形状が異なる場合があるので、それに対応するためのもの。
tel
電話番号の入力欄。
url
絶対 URL の入力欄。
email
メールアドレスの入力欄。
datetime
日時の入力欄 (UTC)。
date
日付の入力欄。
month
月の入力欄。
week
曜日の入力欄。
time
時刻の入力欄。
datetime-local
日時の入力欄 (現地時刻)。
number
数値の入力欄。
range
目盛りなど、一定の範囲から数値を取得するフォーム・コントロールを表示させる。
color
カラーパレットなど、色を表す文字列を取得するフォーム・コントロールを表示させる。
form (既述)
autofocus ブール属性。
指定すると、ページの表示時にそのフォーム・コントロールにフォーカスが移る。
autocomplete 以下のいずれかを指定する。
on
キーワード・マッピングをオンにする。
off
キーワード・マッピングをオフにする。
値無し
デフォルト状態にする (関連づけられている form 要素の autocomplete の値。form 要素の autocomplete のデフォルト値は on)。
この属性を指定しない場合はデフォルト状態となる。
list あらかじめ定義しておいた選択肢一覧 datalist 要素の ID を指定する。
required ブール属性。
指定するとその要素は必須となり、サブミット時にチェックされる。
multiple ブール属性。
ユーザーが複数の値を指定できることを表す。
pattern フォーム・コントロールの value をチェックするための正規表現。
min 最小値。
値が数値の場合、その値が最小値となる。
値が数値でない場合、type 属性の現在の状態からデフォルトの最小値が決定されれば、その値が最小値となる。
いずれでもない場合、最小値は無しとなる。
サブミットの際、ユーザーが入力した値が数値の場合、最小値より小さいかどうかチェックされる。
max 最大値。
内容は min 属性と同様。
step 取りうる数値の階差。
ベース値は、もし最小値が設定されていればその値。最小値が無い場合、デフォルトのベース値が設定されていればその値。それが無ければ 0。
placeholder ユーザーがデータ入力する際の補助となる短めのヒント。
入力する値のサンプルや、短い説明を記述しておく。
改行コードは使用できない。
label 属性とは異なる。
output
※新規
for 計算に使われたり、計算に影響を与えたりする要素を、明示的に示す。
form (既述)
name 要素名。

W3C サイトに書かれていた例を引用。
(1) input 要素の pattern 属性の例
<label> Part number:
<input pattern="[0-9][A-Z]{3}" name="part"
title="A part number is a digit followed by three uppercase letters."/>
</label>
(2) datalist 要素の例
<input type="url" name="location" list="urls">
<datalist id="urls">
<option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">
<option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
<option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
<option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
<option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
<option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</datalist>
(3) output要素の例
<form onsubmit="return false">
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>
タグ:HTML5
posted by K/I at 08:05 | 東京 🌁 | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月29日

HTML5 のテキストの意味付け関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ
●参考
4.6 Text-level semantics - HTML5

テキストの意味付け関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
time flow content
phrasing content
phrasing content (time 要素を除く) 時刻または日付 (時刻とタイムゾーンをつけてもよい) を表す。
mark flow content
phrasing content
phrasing content テキストの一部を強調表示するのに使う。
emstrong と異なり、本来の文章の意図とは別の意味付けから強調したい場合に用いる (あとから蛍光ペンでマーカーをつける感覚)。
たとえば以下の状況で使われる。
  • 引用した文の一部を強調表示 (もともとは強調表示されていない) → 例の (2) 参照
  • ユーザーの操作に関連が深い部分を強調表示 (検索結果での検索語の強調表示、エラー出力のエラー箇所の表示など)
ruby flow content
phrasing content
phrasing content の後に rt 要素 1 つ
または
rp 要素 1 つと rt 要素 1 つと別の rp 要素 1 つを組み合わせたグループ 1 つ以上
ルビを振る。
rt なし phrasing content
rp なし phrasing content
wbr flow content
phrasing content
なし 改行可能位置を示す。

time 要素の属性 (グローバル属性を除く)

属性名 説明
datetime 日付または時刻を表す。
この属性が指定されない場合、日付または時刻は要素の内容で指定される。
  • 日付が必須で datetime 属性が存在する場合、その値は有効な日付を表す文字列でなければならない (時刻はオプション)。
  • 日付が必須で datetiime 属性が存在しない場合、要素の内容は有効な日付を表す文字列でなければならない (時刻はオプション)。
  • 日付が必須でなく、datetime 属性が存在する場合、その値は有効な日付または時刻を表す文字列でなければならない。
  • 日付が必須でなく、datetime 属性が存在しない場合、要素の内容は有効な日付または時刻を表す文字列でなければならない。
日付は、グレゴリオ暦で表す。
pubdate ブール属性。
指定すると、直近の親の article 要素の発行日時を表す。article 要素が存在しなければ、文書全体の発行日時となる。
この属性を指定した場合、日付は必須。
article 要素または文書に対して、pubdate 属性を持つ time 要素は複数指定できない。

W3C の仕様書から、いくつか例を引用。
(1) time 要素を使った hCalendar の例
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2007-10-05">10月5日</time> -
<time class="dtend" datetime="2007-10-20">19日</time>、
<span class="location">アージェント・ホテル (カリフォルニア州サンフランシスコ)</span>にて
</div>
(2) mark で強調表示する例
<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
<p>Look around and you will find, no-one's really
<mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>
(3) ルビの例
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
(4) wbr を使って長い1語を途中改行できるようにした例
<p>So then he pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>
タグ:HTML5
posted by K/I at 11:14 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月26日

HTML5 のコンテンツグループ化関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ
●参考
4.5 Grouping content - HTML5

コンテンツグループ化関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
figure flow content
sectioning root
次のいずれか。
  • figcaption 1 つと、その後に flow content
  • flow content と、その後に 1 つの figcaption
  • flow content
自己完結していて、通常は本文から参照されるもの。
たとえば、注釈のイラスト、図表、写真、コードリストなどに使われる。
本文から分離したところ (サイドバー、別ウィンドウ、付録など) に表示してもよい。
figcaption なし flow content figure 要素を説明するもの。

figurefigcaption 要素の属性 (グローバル属性を除く)

figurefigcaption 要素の属性は、グローバル属性のみ。

W3C に書かれていた例をいくつか。
まずは、コードリストの例。
<p>基本的なコアインターフェース API の定義については、<a href="#l4">リスト 4</a> を参照のこと。</p>
<figure id="l4">
<figcaption>リスト 4: 基本的なコアインターフェース API の定義</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence&lt;byte> data);
void initSelfDestruct();
}</code></pre>
</figure>
<p>API は、UTF-8 を使用するように設計されている。</p>
次は、figure ではない図と、figure である図・映像の例。
<h2>Malinko のコミック</h2>
<p>この事例では、コミックに関するある種の「知的財産」侵害に焦点が当て
られた (証拠物件 A 参照)。この訴訟では、以下の言葉で終わる予告編映像を
追及している。
<blockquote>
<img src="promblem-packed-action.png" alt="ラフコピー! この行為は問題満載!">
</blockquote>
<p>...が放送された。弁護士は Bigger 社製のノート PC という武器を手に、
雪ダルマ式戦法で先制攻撃を開始した。予告編は、証拠物件 B で全映像を閲
覧できる。
<figure>
<img src="ex-a.png" alt="汚れた紙に書かれた走り書き。">
<figcaption>証拠物件 A: 提示されたコミックの<cite>ラフコピー</cite></figcaption>
</figure>
<figure>
<video src="ex-b.mov"></video>
<figcaption>証拠物件 B: <cite>ラフコピー</cite>予告編映像</figcaption>
</figure>
<p>この事例は、法廷外で解決した。
タグ:HTML5
posted by K/I at 07:07 | 東京 ☁ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月25日

HTML5 の埋め込みコンテンツ関連タグ

【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 のフォーム関連タグ
●参考
4.8 Embedded content - HTML5

埋め込みコンテンツ関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
embed flow content
phrasing content
embedded content
interactive content
なし 外部アプリケーションやインタラクティブなコンテンツを置くためのもの。
一般的に使われてきたものが HTML5 で正式採用された。
video flow content
phrasing content
embedded content
interactive content
(controls 属性を持つ場合)
トランスペアレント要素 (メディア要素を除く) (src 属性を持つ場合)
1つ以上の source 要素、およびその後にトランスペアレント要素 (メディア要素を除く) (src 属性を持たない場合)
ビデオの挿入に使用する (音声もありえる)。
embed と異なり、プラグインを使わずにビデオコンテンツを貼り付けることができる。
JavaScript による操作、CSS によるエフェクトも可能。
audio flow content
phrasing content
embedded content
interactive content
(controls 属性を持つ場合)
トランスペアレント要素 (メディア要素を除く) (src 属性を持つ場合)
1つ以上の source 要素、およびその後にトランスペアレント要素 (メディア要素を除く) (src 属性を持たない場合)
音声の挿入に使用する。
source なし なし メディア要素のメディア・リソースを指定する。
これは、複数指定することができる。
メディア要素の src 属性が指定されている場合、source 要素は無視される。
メディア要素の src 属性が指定されずに source 要素が指定された場合、source 要素で指定されたメディア・リスースを順番に再生していく (属性が正しくないものや、対応しないタイプのもの、リソースをダウンロードできない場合はスキップされる)。
canvas flow content
phrasing content
embedded content
トランスペアレント ビットマップキャンバスを表示する。
グラフの描画、ゲームのグラフィック表示など。
ビジュアルメディアでない場合や、canvas に対するスクリプト処理が無効にされている場合、canvas 要素のサポートが無効になっている場合などは、フォールバック・コンテンツが表示される。

video 要素の属性 (グローバル属性を除く)

属性名 説明
src メディアリソースのアドレス。
poster ビデオデータの準備が完了するまで表示させておく画像ファイルのアドレス (ポスター・フレーム)。
ビデオが表示できなかったり、最初のフレームで一時停止したりしたときに使われる。
いったんビデオが表示されたら二度と表示されない。
preload コンテンツのプリロード処理についての指定。
none
ユーザーがメディアのリソースを持っている必要がないか、サーバーによけいな負担をかけたくない。
(つまり、プリロードしないでほしい)
metadata
ユーザーがメディアのリソースを持っている必要はないが、メタデータ (大きさ(ピクセル値)、最初のフレーム、トラックリスト、再生時間、など) を取得しておくのが望ましい。
auto (あるいは空欄)
ユーザーの要求を優先させてもサーバーに影響は与えない。
(つまり、全部プリロードしてもかまわない)
preload 属性が指定されていない場合のデフォルト値はブラウザ依存 (W3C は metadata を推奨)。
autoplay ブール属性。
指定すると、再生可能になったら即座に再生する。
loop ブール属性。
指定すると、ループ再生する。
controls ブール属性。
指定すると、ブラウザの制御ボタンが表示される。
制作者側で操作スクリプトを用意する場合には、これを指定しない。
width ビデオの幅。
height ビデオの高さ。

audio 要素の属性 (グローバル属性を除く)

属性名 説明
src (videoと同じ)
preload (videoと同じ)
autoplay (videoと同じ)
loop (videoと同じ)
controls (videoと同じ)

source 要素の属性 (グローバル属性を除く)

属性名 説明
src メディア・リソースのアドレス。
必須。空欄禁止。
type メディア・リソースのタイプを MIME タイプで指定する。
media メディアクエリーを指定する。(参考: Media Queries)
省略した場合、デフォルト値 all (つまり、すべてのメディアに適したリソースという意味) となる。

canvas 要素の属性 (グローバル属性を除く)

属性名 説明
width 幅。
デフォルト値 300。
height 高さ。
デフォルト値 150。

(1)映像をダウンロードできなかった場合にエラーを表示させる例
W3C サイトに掲載されていた例を引用。
<script>
function failed(e)
{
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert("ビデオの再生中止。");
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert("テスト用アラート:\nネットワークエラーが発生しました。\nビデオ ファイルのダウンロードを中断しました。");
break;
case e.target.error.MEDIA_ERR_DECODE:
alert("テスト用アラート:\nビデオ再生に失敗しました。\nファイルが壊れ ているか、ビデオが使用している機能にブラウザが対応していない可能性がありま す。");
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert("テスト用アラート:\nビデオをロードできません。\nサーバーへの接 続エラーか、ビデオフォーマットがサポートされていない可能性があります。");
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p><video autoplay src="tgif.mpg" controls onerror="failed(event)"></vid eo></p>
<p><a href="tgif.mpg">ビデオファイルのダウンロード</a></p>

ビデオファイルのダウンロード

(2)ビットマップキャンバスに2つの矩形を描く
こちらは、MOZILLA サイトに掲載されていた例。
Firefox 以外で動作するかどうか不明。
<!-- フォールバック・コンテンツとして、canvas 非対応ブラウザへのメッセー ジを記述。-->
<canvas id="canvas01">このブラウザは、canvas の表示に対応していません。 </canvas>
<script type="text/javascript"><!--
// canvas ノードのコンテキストを取得
var ctx = document.getElementById('canvas01').getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);
// -->
</script>
このブラウザは、canvas の表示に対応していません。
タグ:HTML5
posted by K/I at 17:24 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月19日

HTML5 のセクション関連タグ

HTML5 では、セクション関連のタグが大きく変更されている。
W3C のサイトでは、以下のページで解説されている。
4.4 Sections — HTML5
この文書をもとに、セクション関連タグを整理してみた。
【関連記事】
HTML4/XHTML1 から HTML5 への変更点
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ

セクション関連要素一覧

要素 カテゴリ タグ内に含むもの 説明
body sectioning root flow content ドキュメントのメインコンテンツ。
section flow content
sectioning content
formatBlock candidate
flow content ドキュメントやアプリケーションの一般的なセクション。
同一テーマのかたまりで、たいていはヘッダーがついている。
nav flow content
sectioning content
formatBlock candidate
flow content ナビゲーションリンクを記述するセクション。
リンクグループをすべて nav 要素に入れる必要はなく、メインのナビゲーションブロックだけを入れる。
article flow content
sectioning content
formatBlock candidate
flow content 自己完結した文のまとまり。
たとえば、ブログの個々の記事など。
article の入れ子もありうる。
aside flow content
sectioning content
formatBlock candidate
flow content 本文の補足記事。
注記や補足情報など、本文の主題から逸れた内容の記述に使う。
h1h6 flow content
heading content
formatBlock candidate
phrasing content ヘッダー。
hgroup flow content
heading content
formatBlock candidate
1つ以上の h1, h2, h3, h4, h5, h6 要素 ヘッダーが多階層から成る場合に、h1h6 要素をまとめるのに使う。
ページのサマリーを作る時、hgroup のところは h1h6 の最上位のものが使われる。
header flow content
formatBlock candidate
flow content (header, footer 要素を除く) article の導入部分に使用する。
h1h6hgroup などをまとめたもの。
目次、検索欄、関連ロゴなどの表示にも使える。
footer flow content
formatBlock candidate
flow content (header, footer 要素を除く) フッター情報。
著者、関連文書へのリンク、著作権表示などの表示に使う。
セクション全体が含まれている場合は、付属文書、索引、奥付、ライセンス契約などを意味する。
記述位置はセクションの最後でなくてもよい。
address flow content
formatBlock candidate
flow content (heading content、sectioning content、header, footer, address 要素を除く) 記事に関する連絡先情報。
※任意の住所を記述するためのものではなく、あくまで関連する連絡先を記述するためのもの。
通常は footer 要素の中に記述する。

以下は、W3C のサイトを参考にして書いたサンプルコード。
<header> <h1>全日本スローライフ推進委員会</h1> <nav> <hgroup> <!-- ヘッダー情報を拾い出すアプリケーションは、「関連リンク」を採用する --> <h1>関連リンク</h1> <h2>スローライフに関する他のサイト</h2> </hgroup> <ul> <li><a href="http://www.nowhere1.org/history.html">日本のスローライフ</a></li> <li><a href="http://www.nowhere2.org/">全国スローライフ満喫協会</a></li> </ul> </nav> </header> <aside> <!-- aside をブログのサイドバーのリンクに使用した例 --> <nav> <h1>お気に入り</h1> <ul> <li><a href="http://www.nowhere3.org/">のんびり行こうよ、どこまでも</a></li> <li><a href="http://www.nowhere4.org/">委員会議事録</a></li> </ul> </nav> <nav> <h1>最近の記事</h1> <ul> <li><a href="111111.html">スローライフ推進委員会のお知らせ</a></li> <li><a href="111110.html">新委員のご紹介</a></li> <li><a href="111109.html">遅食い大会のスタッフが決まりました</a></li> </ul> </nav> </aside> <div> <article> <header> <h1>第32回 遅食い大会開催のお知らせ</h1> <p><time pubdate datetime="2010-07-10T10:28+09:00"></time></p> </header> <p>恒例の遅食い大会を開催いたします。</p> <p>...</p> <aside> <h1>遅食い大会</h1> <p>遅食い大会は、全日本スローライフ推進委員会が主催する遅食い競争の全国大会。</p> <p>...</p> </aside> <section> <h1>コメント</h1> <article> <footer> <p>投稿者: 十年寝太郎</p> <p><time pubdate datetime="2010-07-11T19:10+09:00"></time></p> </footer> <p>今年ももちろん参加します。</p> </article> <article> <footer> <p>投稿者: 56寸法師</p> <p><time pubdate datetime="2010-07-12T09:15+09:00"></time></p> </footer> <p>素敵なイベントですね。</p> </article> </section> </article> <article> ... </article> </div> <footer> <p>opyright &copy; 2010 Japan Slowlife Lovers</p> <p><a href="about.html">About Us</a> - <a href="privacy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer>
タグ:HTML5
posted by K/I at 11:40 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年07月18日

HTML4/XHTML1 から HTML5 への変更点

HTML5 が話題になってずいぶん経ったけれど、いったい何がどう変わったのだろう?
現状ではほとんど何の恩恵も受けていない気がする。
そういえば HTML5 が何者なのか、そもそもよく知らないではないか。

そんなわけで W3C のサイトを覗いてみたところ、こんなものが置いてあった。
HTML5 differences from HTML4
ありがたや、まさにこんな解説がほしかった。

以下、この文書をもとに HTML5 の特徴をごく荒っぽくまとめてみた。
※参照したテキストは "W3C Working Draft 24 June 2010" 時点のもの
  • HTML4、XHTML1 と互換性はあるが、SGML との互換性は無い。
  • 1行目の書き方は、
    HTML (HTML5) の場合:
    <!DOCTYPE html>
    ※SGML 準拠をやめたので DTD の指定は不要になった。
    XML (XHTML5) の場合:
    <?xml version="1.0" encoding="UTF-8"?>
  • MIME形式 text/html-sandboxed が追加された。(参考サイト:『HTML 5 sandbox 属性による iFrame セキュリティの向上』)
  • ファイル先頭の BOM で文字エンコーディングが判断されるようになった。
  • MathML と SVG の要素を直接記述できるようになった。
  • IRI (Internationalized Resource Identifier) をネイティブサポートした。
  • lang 属性に空文字列を指定できるようになった。
  • 要素、属性が変更された。→要素の変更点属性の変更点
  • 各種 API が導入された (映像とか音声とかドラッグ&ドロップとか)。
  • HTMLDocument, HTMLElement の機能が拡張された。
    • getElementsByClassName()
    • innerHTML
    • activeElement
    • hasFocus
    • getSelection()
    • classList
    • className

要素の変更点

追加要素 廃止要素
(存在しないもの、
推奨されないものを含む)
  • head 要素内での object 要素
  • basefont (CSS を使用)
  • big (CSS を使用)
  • center (CSS を使用)
  • font (CSS を使用)
  • s (CSS を使用)
  • strike (CSS を使用)
  • tt (CSS を使用)
  • u (CSS を使用)
  • frame, frameset, noframes
  • acronym (abbr を使用)
  • applet (object を使用)
  • isindex (フォームを使用)
  • dir (ul を使用)

属性の変更点

要素名 追加された属性 廃止された属性
(存在しないもの、
推奨されないものを含む)
(グローバル属性)
  • contenteditable
  • contextmenu
  • data-*
  • draggable
  • hidden
  • role
  • aria-*
  • spellcheck
●root要素
html
  • manifest
  • version
●文書メタデータ
head
  • profile
base
  • target
link
  • sized
  • rev
  • charset
  • target
meta
  • charset
  • scheme
style
  • scoped
●スクリプト
script
  • async
  • language
●セクション
body
  • alink (CSS を使用)
  • link (CSS を使用)
  • text (CSS を使用)
  • vlink (CSS を使用)
  • background (CSS を使用)
h1, h2, h3, h4, h5, h6
  • align (CSS を使用)
●グループ化
p
  • align (CSS を使用)
hr
  • align (CSS を使用)
  • noshade (CSS を使用)
  • size (CSS を使用)
  • width (CSS を使用)
pre
  • width (CSS を使用)
ol
  • start (復活)
  • reversed
  • compact (CSS を使用)
  • type (CSS を使用)
ul
  • compact (CSS を使用)
  • type (CSS を使用)
li
  • value (復活)
  • type (CSS を使用)
dl
  • compact (CSS を使用)
div
  • align (CSS を使用)
●テキストレベル
a
  • media
  • ping
  • target (復活)
  • name (id 属性を使用)
  • rev
  • charset
  • shape
  • coords
br
  • clear (CSS を使用)
●埋め込み
img
  • border (CSS を使用)
  • longdesc
  • name (id を使用)
  • align (CSS を使用)
  • hspace (CSS を使用)
  • vspace (CSS を使用)
iframe
  • sandbox
  • seamless
  • srcdoc
  • longdesc
  • align (CSS を使用)
  • frameborder (CSS を使用)
  • marginheight (CSS を使用)
  • marginwidth (CSS を使用)
  • scrolling (CSS を使用)
object
  • archive
  • classid
  • codebase
  • codetype
  • declare
  • standby
  • align (CSS を使用)
  • border (CSS を使用)
  • hspace (CSS を使用)
  • vspace (CSS を使用)
param
  • valuetype
  • type
area
  • media
  • ping
  • hreflang
  • rel
  • target (復活)
  • nohref
●テーブル
table
  • summary
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • border (CSS を使用)
  • cellpadding (CSS を使用)
  • cellspacing (CSS を使用)
  • frame (CSS を使用)
  • rules (CSS を使用)
  • width (CSS を使用)
caption
  • align (CSS を使用)
colgroup
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
col
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
tbody
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
thead
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
tfoot
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
tr
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
td
  • axis
  • abbr
  • scope
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • height (CSS を使用)
  • nowrap (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
th
  • axis
  • abbr
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • height (CSS を使用)
  • nowrap (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
●フォーム
form
  • novalidate
fieldset
  • form
  • disabled
legend
  • align (CSS を使用)
input
  • autofocus (type 属性が hidden の場合を除く)
  • placeholder
  • form
  • required (type 属性が hidden, image, ボタン類 (submit など) の場合を除く)
  • autocomplete
  • min
  • max
  • multiple
  • pattern
  • step
  • list (datalist 要素と一緒に使用)
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • type 属性の値に以下を追加
    • tel
    • search
    • url
    • email
    • datetime
    • date
    • month
    • week
    • time
    • datetime-local
    • number
    • range
    • color
  • align (CSS を使用)
button
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
select
  • autofocus
  • form
textarea
  • autofocus
  • placeholder
  • form
  • required
●対話
menu
  • type
  • label
  • compact (CSS を使用)

【関連記事】
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ

【修正・2010年7月18日】
表「属性の変更点」をカテゴリ分け
【追記・2010年7月22日】
「コンテンツのグループ化関連タグ」を追加
【変更・2010年7月26日】
「コンテンツのグループ化関連タグ」を別記事に独立
タグ:HTML5
posted by K/I at 00:20 | 東京 ☀ | Comment(2) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年06月27日

Android アプリ開発環境の構築

Android SDK をインストールしたので、その作業メモ。
Android Developers
http://developer.android.com/index.html

1. インストール前の準備

サポートされているOSは、
  • Windows XP (32-bit) or Vista (32- or 64-bit)
  • Mac OS X 10.5.8 or later (x86 only)
  • Linux (tested on Linux Ubuntu Hardy Heron)
今回は、Windows XP を用いた。

開発ツール (IDE) は、Eclipse が使える。
バージョンは、Version 3.5.1 以上。

JDKのみ、あるいは Ant を使ってもできるみたいだが、今回は Eclipse を使用した。

2. インストール

2.1 インストーラの入手
インストーラ (SDK starter package) は、上記サイトの左メニューにある Download から入手できる。
Windows版の現時点での最新版は android-sdk_r06-windows.zip だった。
2.2 インストールの実行
前項でダウンロードした ZIP ファイルをインストール先フォルダ (場所は任意) に展開。
今回は、C:\android-sdk-windows とした。
フォルダ内のファイル、SDK Setup.exe を実行する。

すると、なにやら不穏なダイアログが。。。
Android SDK Install #01
Android SDK and AVD Manager というツールが Android SDK のレポジトリ情報をダウンロードしようとしているようだが、それがなぜかうまくいかない様子だ。
エラーメッセージには "Failed to fetch..." と表示されているが、ブラウザなどから試すときちんとダウンロードできる。
サーバーがダウンしているわけではないようだ

いったん [Cancel] ボタンをクリックして画面を閉じる。
Android SDK and AVD Manager の左メニューから [Settings] を選び、[Misc] の [Force https://... sources to be fetched using http://...] にチェックを入れる。
Android SDK Install #03
すると今度はダウンロードがはじまった。
これはひょっとして、とりあえずバグ回避するためにつくったオプションなのだろうか。。。

さて、左メニューの [Available Packages] を見ると、今度はいろいろと表示されている。
Android SDK Install #04
すべてにチェックを入れて、[Install Selected] ボタンをクリック。
Android SDK Install #05
[Accept All] を選んで [Install] 実行。
欲張って全部選んだものだから、ここはけっこう時間がかかった。
2.3 Eclipse に ADT プラグインインストール
次は、Eclipse に ADT (Android Development Tools) プラグインをインストールする。
Eclipse を起動し、[Help] メニューから [Install New Software...] を選ぶ。
"Install" 画面が開くので、[Work with] 欄に https://dl-ssl.google.com/android/eclipse/ と入力し、[Add] ボタンをクリックする。
そして、"Add Repository" ダイアログの [Name] 欄にはわかりやすい名前 (たとえば "Android Development Tools (ADT)") を入力し、[OK] ボタンをクリック。

下のツリービューの "Developer Tools" の下に "Android DDMS" と "Android Development Tools" が表示される。
ついでなので両方とも選ぶ。
あとは、画面の指示に従ってインストールを実行する。

完了したら Eclipse を再起動し、[Window] メニューの [Preferences] を選択。
左側のツリーに [Android] という項目が追加されているので、クリックして [SDK Location] に、Android SDK の展開先フォルダを指定し (今回の場合は "C:\android-sdk-windows")、[Apply] ボタンをクリックする。
指定したフォルダが正しければ、下のリストビューに SDK ターゲットが一覧表示される。

準備はこれで完了だ。

3. サンプルアプリの作成

Android Developers のサイトにチュートリアルがあるので、試しに最初のサンプルを作ってみる。
Hello, World
http://developer.android.com/resources/tutorials/hello-world.html
結果はこんな感じ:
Android SDK Install #06

今回はここまで。
posted by K/I at 00:29 | 東京 ☔ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2010年05月30日

MeeGo を試してみた

モバイル向けLinuxプラットフォーム "MeeGo" の正式版がリリースされたので、Net PC で起動させてみた。
Net PC 向けは Atom にのみ対応のようだ。
今回は、Acer の ASPIRE one (BCM92045NMD) を使用した。
※ちなみに、Celeron PC で試したら、最初の起動画面は表示されるものの起動しようとすると黒画面のまま先に進まなかった。
VMware でも同じ。

印象としては、全体的によく作り込んであると感じた。
ただし、デフォルトの日本語入力は SKK なので使いやすいとは言えない。
試した限りではひらがな入力はできても漢字変換ができなかった。
これはあくまで「プラットフォーム」なので、大きな問題ではないかもしれないが。

さて、まずは MeeGo の公式サイトからディスクイメージをダウンロードする。
http://meego.com/
トップメニューの Downloads から、Netbook を選ぶと、"MeeGo v1.0 for Netbooks (Google Chrome Browser)" と "MeeGo v1.0 for Netbooks" の2種類が用意されている。
今回は "MeeGo v1.0 for Netbooks (Google Chrome Browser)" をダウンロードした (ファイルサイズ 800MB)。

ファイルがダウンロードできたら、何らかの方法で USB メモリにコピーする。
たとえば、Unix系OSなら
# dd if=meego-netbook-ia32-1.0.0.20100524.1.img of=デバイス名
などとすればよい。

USBメモリが用意ができたら、あとはそこからブートするだけである。
Net PCの起動時にBIOS設定画面を表示させ、ブート順を変更する。
USB メモリは、たとえば USB HDD に相当するので、それをいちばん上に移動させる。
そして、作成したMeeGo USBメモリをNet PCに挿して起動すればMeeGoの起動画面が表示される。
MeeGo #01 - 起動画面
ここで "Installation Only" を選べばローカルディスクに MeeGo がインストールされるのだが、今回はとりあえず "Boot MeeGo" を選んで USB メモリから起動する。
※ローカルディスクにインストールすると、日本語環境になったり、設定が保存されたりするようになる。
 ただし、それ用のパーティションを切っておくか、Net PCを1台つぶす覚悟を決めるか、しておく必要がある。
MeeGo #02 - Myzone

ヘッダ部にメニューが並んでいる。
それぞれ、以下のような画面が表示される。
まずはネットワークの設定。
利用できる無線LANの一覧が表示されているので、[Connect] ボタンをクリックしてパスワードを入力し、接続する。
MeeGo #13 - WiFi接続

MeeGo #14 - WiFi接続完了

Bluetooth も使える。
[Add a new device] ボタンをクリックするとデバイスを検索して表示してくれるので、[Pair] リンクをクリックしてデバイスを追加する。
MeeGo #15 - Bluetoothデバイス検索

MeeGo #16 - Bluetoothデバイス追加

ステータスというのはコミュニケーションサービスを表示する画面で、現在は Last.fm と twitter のクライアントが用意されている。
MeeGo #17 - Twitter設定

MeeGo #18 - TwitterのTL表示

メールは、Evolution が採用されている。
ただし、メールの送信がなぜかうまくいかなかった。
送信されずに送信ボックスに残ったままだ。
原因不明。

ピープル画面は、メッセンジャーソフトのクライアントで、Facebook、Google Talk、ICQ、AIMなど、複数のサービスを使用できる。

ちなみに、アプリケーション画面のシステムツールからターミナルを起動できる。
いざという時にはこれが使えそう。
タグ:MeeGo Linux
posted by K/I at 18:58 | 東京 ☁ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年12月27日

WebアプリでSQLiteを使ってみる (Perl)

SQLiteは、"most widely deployed SQL database engine in the world" だそうである (SQLite のホームページより)。
しかも、設定不要でサーバーの設置の必要もなく、トランザクションにも対応している。
こんな重宝なものを使わずに放っておくのはもったいない。
そんなわけで、(今さらながら) SQLite を使ってみた。

今回使用した環境は、
・SQLite
・Perl (および、DBI, DBD:SQLite)
・OS は Fedora 10
たいていのレンタルサーバーであれば、(OSはさておき) こういう環境が用意されているのではないだろうか。

以下は、簡単なアドレス帳の Web アプリの作例。

(1) ドキュメント

SQLite のホームページでドキュメントが整備されている。
以下のレファレンスがあれば、だいたい事足りそうだ。
http://sqlite.org/lang.html
これを眺めてみると、意外なほど機能が充実していることが分かる。

(2) sqlite3 コマンドでデータベースファイルを作成

sqlite3 は、コマンドラインから SQLite データベースファイルを操作するためのコマンドである。

SQLite では、個々のデータベースファイルが MySQL や PostgreSQL の「データベース」に相当する。
たとえば、コマンドラインから
$ sqlite3 addrbook.db
を実行すると、addrbook.db というデータベースファイルが作られ、SQLite のプロンプトが表示される。
sqlite>
この SQLite プロンプトに SQL 文を入力すれば、指定したファイル (上記の場合は addrbook.db) にデータが書き込まれていく。

なお、
sqlite> .help
と入力すると SQLite コマンド一覧が表示されるので、だいたいの機能の見当がつく。
(.databases というコマンドがあり、データベース一覧を表示できる。ということは、1 ファイルで複数のデータベースを保持できるのだろうか? 今のところ、真相不明)

さて、必要なテーブルを sqlite3 で作っておこう。
sqlite> CREATE TABLE personal ( name, addr, tel, email );
sqlite> .quit
これで、データベースファイル addrbook.db の準備は完了である。

(3) Webアプリからの操作

では、Web アプリから Perl / DBD::SQLite 経由でデータベースファイルにアクセスしてみよう。

まずは、サンプルコード。
※SQLインジェクションなどの対策はまったくしていないのでご注意。
#!/usr/bin/perl
use strict;
use CGI qw(param);
use DBI;
# データベースへの接続
my $dbname = 'addrbook.db';
my $dbh = DBI->connect("dbi:SQLite:dbname=$dbname", '', '') or do {
print_err('データベースに接続できない');
exit 0;
};
if (param()) {
my $name = param('name');
$name =~ s/'/''/g;
$name =~ s/\\/\\\\/g;
my $addr = param('addr');
$addr =~ s/'/''/g;
$addr =~ s/\\/\\\\/g;
my $tel = param('tel');
$tel =~ s/'/''/g;
$tel =~ s/\\/\\\\/g;
my $email = param('email');
$email =~ s/'/''/g;
$email =~ s/\\/\\\\/g;
my $sql = "INSERT INTO personal ( name, addr, tel, email ) "
. "VALUES ( '$name', '$addr', '$tel', '$email' )";
$dbh->do($sql) or do {
print_err("SQL実行失敗:<br>$sql", __LINE__);
exit 0;
};
}
my $sql = 'SELECT name, addr, tel, email FROM personal';
my $sth = $dbh->prepare($sql) or do {
print_err("SQL準備失敗 ($sql)", __LINE__);
exit 0;
};
my $rc = $sth->execute or do {
print_err("SQL実行失敗 ($sql)", __LINE__);
exit 0;
};
print <<EOS;
Content-Type: text/html;charset=utf-8
<html>
<head>
<title>アドレス帳</title>
</head>
<body>
<form action="addrbook.cgi">
名前: <input type="text" name="name"><br>
住所: <input type="text" name="addr"><br>
電話: <input type="text" name="tel"><br>
メール: <input type="text" name="email"><br>
<input type="submit" value="追加">
</form>
<table border="1">
<tr>
<th>名前</th>
<th>住所</th>
<th>電話</th>
<th>メール</th>
</tr>
EOS
while (my $ref_row = $sth->fetchrow_hashref) {
print " <tr>\n";
print " <td>", $ref_row->{'name'}, "</td>\n";
print " <td>", $ref_row->{'addr'}, "</td>\n";
print " <td>", $ref_row->{'tel'}, "</td>\n";
print " <td>", $ref_row->{'email'}, "</td>\n";
print " </tr>\n";
}
print <<EOS;
</table>
</body>
</html>
EOS
$dbh->disconnect;
sub print_err
{
my $msg = shift @_;
my $line = $#_ >= 0 ? shift : undef;
print <<EOS;
Content-Type: text/html;charset=utf-8
<html>
<head>
<title>エラー</title>
</head>
<body>
<h1>エラー</h1>
EOS
if ($line) {
print "l.$line<br/>";
}
print <<EOS;
<div>$msg</div>
</body>
</html>
EOS
}
1;
これを、UTF-8 エンコーディングで addrbook.cgi というファイル名でしかるべき場所に、addrbook.db とともに保存すればよい。
(addrbook.db は、Apache から読み書きができるようにパーミションを変更しておく必要がある)

addrbook.cgi をブラウザで開くと、上半分がアドレスの追加フォーム、下半分がアドレス一覧になるはずだ。

上のコードでは、DBI->connect でデータベースファイルに接続し、do で INSERT し、prepare & execute で SELECT を実行し、fetchrow_hashref で SELECT 結果を読み出している。
posted by K/I at 07:45 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年12月05日

携帯アプリの作り方 -- iアプリ(DoJa)編

iアプリの開発環境は、NTT から提供されている (Windows版のみ)。
DoJaプロファイル向けの開発ツールダウンロード
http://www.nttdocomo.co.jp/service/imode/make/content/
iappli/tool/doja/index.html
今回は、現時点での最新版「iαppli Development Kit for DoJa-5.1」(「iアプリ開発キット」と呼ぶことにする) を使用した。

(1) Eclipse をインストール

Eclipse 上で開発するほうがなにかと便利なので、Eclipse をインストールしておくことにしよう。
iアプリ開発キットは Eclipse 3.0.* および Eclipse 3.1.* にしか対応していないので、そのバージョンの Eclipse を用意する必要がある。

旧バージョンの Eclipse は、eclipse.org のサイトからダウンロードできる。
http://archive.eclipse.org/eclipse/downloads/index.php
今回は、3.1.2 をダウンロードして、C:\ 直下に展開した。
ほかのバージョンの Eclipse と区別するために、C:\eclipse_3.1.2 とフォルダ名を変更しておく。

なお、ランゲージパックを探すのがめんどうだったので、とりあえず英語のまま。

(2) iアプリ開発キットのインストール

前述の NTT のダウンロードサイトから、iアプリ開発キットの 5.1 をダウンロードし、実行する。
インストーラが展開されるので、DISK1 フォルダ内の setup.exe を実行する。
途中、「セットアップタイプ」画面で[カスタム]を選択する。
次の「機能の選択」画面で、[Eclipse3.0/3.1 プラグイン]にチェックを入れて次に進む。
iアプリ開発キットのインストール
「Eclipse 3.0/3.1 インストールディレクトリの指定」画面では、(1) で展開したフォルダ名 (今回は C:\eclipse_3.1.2) を選ぶ。

あとは、指示に従ってインストールを進める。

※NTTのダウンロードサイトの「3Dグラフィックスのエミュレート」に、3Dグラフィックス操作用のツールについて書かれているが、今回は割愛。

なお、iアプリ開発キットのインストール先をデフォルト以外のフォルダにした場合には、Eclipse 起動後に設定の変更が必要のようだ。

Eclipse を起動し、[Window] メニューの [Preferences...] で「Preferences」画面を開き、左のツリービューから [DoJa-5.1 Environment] をクリックして、「iαppli DevelopmentKit for DoJa-5.1のインストール先」が正しいフォルダが指定されているか確認しておく。

(3) テストアプリの作成 (HelloWorld)

とりあえず、HelloWorld アプリを作ってみることにしよう。

[File] メニューから[New]->[Project...] を選び、「Select a wizard」画面で "Java" の中の "DoJa-5.1 プロジェクト" を選んで [Next] ボタンをクリック。
プロジェクト名を HelloWorld として作成する。

プロジェクトができあがったら、Package Explorer で src フォルダにパッケージ hello、その中にクラス World を作成することにしよう。
クラス World の Superclass は "com.nttdocomo.ui.IApplication" とする。
iアプリの作成 - クラスを定義

World.java ファイルに、たとえば以下のような変更を加える。
package hello;
import com.nttdocomo.ui.Display;
import com.nttdocomo.ui.IApplication;
import com.nttdocomo.ui.Label;
import com.nttdocomo.ui.Panel;
public class World extends IApplication {
public void start() {
Panel obj_panel = new Panel();
obj_panel.add(new Label("Hello World!"));
Display.setCurrent(obj_panel);
}
}
では実行してみよう。

[Run] ボタンをクリックすると、"Create, manage, and run configurations" 画面が表示される。
左のツリービューから [DoJa-5.1 アプリケーション] を選び、下の [New] ボタンをクリックする。
項目が追加されるので、[Name] 欄にたとえば "HelloWorld" と入力し、[Run] ボタンをクリックする。

iアプリ開発キットが起動して、"Hello World!" と表示されれば実行成功である。
iアプリの作成 - 起動

※もし、下のようなエラー画面が表示されたら、Path 環境変数に JDK の bin フォルダを追加し、Eclipse を再起動すると直るかもしれない。
iアプリの作成 - jar ファイルが作成できない

(4) iアプリの公開

作成したiアプリは、bin フォルダの中に作成される。

フォルダを開いてみると、HelloWorld.jar のほかに、HelloWorld.jam と Download.html が作られている。
HelloWorld.jam はテキストファイルで、iアプリの情報が記載されているので、必要に応じて書き換える。
Download.html は、iアプリをダウンロードするための HTML ファイルなので、これも必要に応じて書き換える。

この 3 ファイルを Web サーバーにアップロードし (Download.html はファイル名を変更してもかまわない)、docomo 端末で Download.html を開く。iアプリのダウンロードリンクが表示されているので、クリックするとアプリがダウンロードされ、docomo 端末にインストールされる仕組みである。
posted by K/I at 18:46 | 東京 ☔ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年11月28日

とうとう直らなかった Windows XP のバグ

しばらく Windows XP 環境が無くて不自由していたが、最近 XP の Net PC を購入して使えるようになった。

さて、以前から気になっていたバグがまだ直っていないことに気づいたのでご報告。
それは、*.exe ファイルなどを、Windows の[スタート]メニューの[すべてのプログラム]にドロップして項目追加すると、正常に追加されないことがある、というバグだ。

以下の場合に生じるらしい

C:\Documents and Settings\All Users\スタート メニュー\プログラム に、たとえば「道具箱」というフォルダがあるとする。
ログインユーザー名が "michael" だとして、C:\Documents and Settings\michael\スタート メニュー\プログラム には「道具箱」フォルダは存在しないとする。
この時、あるアプリケーション appli.exe をドラッグして、[スタート]→[すべてのプログラム]→[道具箱]の中にドロップすると、なぜか消えてしまう。
どこに行ってしまったのかというと、C:\Documents and Settings\michael\スタート メニュー\道具箱 というフォルダが作られていて (プログラム フォルダが抜けている)、その中に "appli.exe へのショートカット" が置かれている。

C:\Documents and Settings\michael\スタート メニュー\プログラム\道具箱 が存在する場合にはこの現象は起きない。
また、すでにスタートメニューに登録されている項目を移動 (またはコピー) した場合には正常な位置に「道具箱」フォルダが作られて項目が追加される。

Microsoft はこれに気づいていないのか、それとも気づいていてもどうでもいいと思って直していないのかわからないが、なんだかなー。
タグ:Windows
posted by K/I at 12:36 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年11月21日

Go を試してみた

Google の Go を試してみた。
http://golang.org/
Go はコンパイル時間がきわめて短く、GC (ガベージコレクタ) 機能を持つ、といった特長があるそうだ。

生粋のプログラマというわけではないので開発言語としてどうなのか評価することはできないが、インストールメモとして書いておきたい。


今回試した環境は Fedora Core 10。
Mac OS X (10.5 または 10.6) でも使えるようなので、いずれやってみたい。

インストール手順は以下のとおり。

(1) Mercurial というソース管理ツールをインストール
# yum install mercurial

(2) 以下の環境変数を設定。
$GOROOT
Go ソースのダウンロード先
$GOOS
OS名。今回は linux。Mac OS X なら darwin
$GOARCH
アーキテクチャ。amd64、386、arm のいずれか
$GOBIN
バイナリのインストール先。デフォルトは $HOME/bin
(3) Mercurial を使ってソースをチェックアウト
$ hg clone -r release https://go.googlecode.com/hg/ $GOROOT

(4) コンパイル&インストール
# cd $GOROOT/src
# ./all.bash

※インストールには、bison、gcc、ed、make などが必要。
最後に、
--- cd ../test
N known bugs; 0 unexpected bugs

と表示されれば正常終了 (N のところにはバージョン番号が表示される)。

インストール中に $GOBIN/quietgcc というシェルスクリプトが作られ、それを使ってコンパイルされたりしていて興味深い。

なお、Mercurial は Linux カーネルの開発の中で産み出された分散型バージョン管理システムだそうである (実際に Linux カーネル開発に採用されたのは Linus 氏が開発した Git)。
Git は聞いたことがあったが、Mercurial というのもあったのか。
いろいろと勉強になる。

※ @IT に機能比較の記事があった。
分散バージョン管理Git/Mercurial/Bazaar徹底比較
http://www.atmarkit.co.jp/fjava/rensai4/devtool03/devtool03_1.html

さて、インストールされるコンパイラ、リンカーのコマンド名はそれぞれ AgAl、中間ファイルは *.A、最終生成物は A.out だ。
A のところは、アーキテクチャによって異なる。
amd64 なら 6、386 なら 8 となる。
※ インストール手順に arm の場合は 8 および 5 と書かれているが、試していないのでどういうことかよくわからない。

提供されているサンプルソースをコンパイル/リンクし、正常に動作することが確認できた。

package main
import "fmt"
func main() {
fmt.Printf("hello, world\n")
}

これを test.go として保存し、コンパイル&リンク。

$ 8g test.go
$ 8l test.8
$ ./8.out
hello, world


とりあえず、今回はここまで。
タグ:Googe Go
posted by K/I at 21:18 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年11月08日

文字を画像として出力する (PHP)

文字を画像にして出力するPHPスクリプトを作ってみた。

ターゲット端末に必要なフォントがインストールされていない場合などに使える。

<?php
if (isset($_REQUEST['c1'])
&& isset($_REQUEST['c2'])
&& isset($_REQUEST['c3'])) {
eval("\$c1 = 0x{$_REQUEST['c1']};");
eval("\$c2 = 0x{$_REQUEST['c2']};");
eval("\$c3 = 0x{$_REQUEST['c3']};");
$char = sprintf('%c%c%c', $c1, $c2, $c3);
$font = './font1.ttf'; // TTF フォントファイルを指定する
$font_size = 20; // フォントサイズ
$bbox = imagettfbbox($font_size, 0, $font, $char);
$dh = $bbox[1];
$x = $bbox[0];
$w = abs($bbox[4] - $bbox[0]);
$h = abs($bbox[5] - $bbox[1]);
$im = imagecreate($w, $h);
$black = imagecolorallocate($im, 0, 0, 0);
$white = imagecolorallocate($im, 255, 255, 255);
imagefilledrectangle($im, 0, 0, 299, 299, $white);
imagettftext($im, $font_size, 0, -$x-1, $h-$dh-1, $black, $font, $char);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
exit;
} else {
header('Content-Type: text/html');
?>
<html>
<head>
<title>文字を画像で出力</title>
</head>
<body>
<form method="test.php" name="form1" mthod="get">
<div>UTF-8 コード:
<input type="text" name="c1" value="" size="2" />&nbsp;
<input type="text" name="c2" value="" size="2" />&nbsp;
<input type="text" name="c3" value="" size="2" /><br />
<input type="submit" value="変換" /></div>
</form>
</body>
</html>
<?php
exit;
}
?>

$font 変数に、True Type フォントのファイル名を、$font_size 変数に表示するフォントのサイズを指定し、test.php というファイル名でしかるべき場所に保存する。

何もパラメータを指定せずに実行すると入力欄が3つ表示されるので、そこに1バイト分ずつ UTF-8 での文字コードを入力する。
たとえば、「石」であれば e79fb3 とする。
[変換] ボタンをクリックすれば、指定した文字が画像として表示される。

なお、いつものことながら上のコードサンプルではセキュリティ上の配慮はしていない。

imagettfbbox() は、指定したフォントサイズ、角度 (この場合は0°)、フォント、文字列 (この場合は1文字だけ) で bounding box を作成してその四隅の座標を配列で返す関数。
その座標情報をもとに画像サイズ (imagecreate() 関数) と文字の位置 (imagettftext() 関数) を決めている。

imagettftext() 関数で 4 つめと 5 つめの引数で -$x-1$h-$dh-1 のように 1 を引いているが、これはフォントによって調整が必要かもしれない。
posted by K/I at 11:22 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年11月03日

RSSを読み込んでTwitterでつぶやく (Perl)

RSSフィードを拾い出して、Twitter にその記事情報を投稿するしくみを Perl で作ってみたのでご紹介。
※ただし、まだ動作に問題があり、改善が必要。

最近のブログには、投稿すると自動的にツイッターに記事の投稿情報を投げてくれるものもあるが、それに対応していない場合に使え そうだ。
また、RSS Reader と Twitter の両方見るのが面倒、という場合は Twitter を RSS リーダー代わりに使う、という用途もありうる。
ただ、無判断にすべて引用してしまうことになるので、ちょっと問題があるかもしれないが。

#!/usr/bin/perl
use strict;
use utf8;
use Encode::JP;
require LWP::UserAgent;
use XML::RSS::Parser;
use Net::Twitter;
my $ua = LWP::UserAgent->new;
my $rss_p = XML::RSS::Parser->new;
# 一覧ファイル読み出し
# ユーザー名<>パスワード<>タイプ<>RSSのURL<>サイトタイトル
# という書式
my $data_file = 'data.txt';
open DATA, $data_file;
flock DATA, 1;
while (my $rss = <DATA>) {
# 項目
$rss =~ s/(?:\r\n?|\n)$//;
next if $rss =~ /^#/; # コメント行は無視
my @rss_items = split /<>/, $rss;
# RSS 読み込み
my $response = $ua->get($rss_items[3]);
$response->is_success or next;
my $rss_data = $response->content;
# RSS のパース
my @articles;
if ($rss_items[2] eq 'type1') {
@articles = parser_type1($rss_p, $rss_data);
} else if ($rss_items[2] eq 'type2') {
@articles = parser_type2($rss_p, $rss_data);
}
# type3 以降も必要に応じて記述
my $tw = Net::Twitter->new(traits => [qw/API::REST/],
username => $rss_items[0],
password => $rss_items[1]);
foreach my $ar_article (@articles) {
my @article = @$ar_article;
my $message = "${article[0]} (${rss_items[4]}) ${article[1]}";
print STDERR Encode::encode('utf-8', "${message}...");
# Twitter に投稿
my $result = $tw->update($message);
print STDERR "done.\n";
sleep 30;
}
}
close DATA;
sub parser_type1
{
my ($rss_p, $rss_data) = @_;
my @articles = ();
my $rss_feed = $rss_p->parse_string($rss_data);
foreach my $item ($rss_feed->query('/channel/item')) {
my $dt_title = $item->query('title')->text_content;
my $dt_link = $item->query('link')->text_content;
push @articles, [ $dt_title, $dt_link ];
}
return @articles;
}
sub parser_type2
{
# 別のタイプのRSSパーサーを記述
}
1;
data.txt というファイルに、<> 区切りでユーザー名やパスワード、RSS のパスなどを指定してコマンドラインでこのスクリプトを実行すれば、Twitter に投稿される。

Twitter とのインターフェースには Net::Twitter というモジュール (CPAN から入手できる) を用いたが、ほかのモジュールもあるし、コマンドラインで curl を呼び出してもよい。
Things Every Developer Should Know
8) A command line is all you need to use the Twitter API
http://apiwiki.twitter.com/Things-Every-Developer-Should-Know#8AcommandlineisallyouneedtousetheTwitterAPInbsp

また、ループの最後で sleep 30 をしているが、これは Twitter のレート制限への対応である。
Rate limiting
http://apiwiki.twitter.com/Rate-limiting
1アカウントにつき、1時間に150回まで、つまり24秒に1回までという制限があるので、少し多めに、30秒間スリープしている。

前述のとおり、このコードにはいくつか問題があり、改善の必要がある。

まず、RSS の読み込み時に文字化けすることがある。
文字化けするとそれ以降すべて文字化けしてしまうようだ。
原因はまだよく検討していない。
なお、この問題は PHP で同様のコードを書くと生じないので、単に Perl でのエンコーディングの処理の問題。

また、140字の文字数制限を考慮していないので、その文字数をオーバーしている場合にはエラーを起こして途中で終了してしまう。
特に、記事のURLが長い場合もあるだろうから、対策にはちょっと工夫が必要だ (bit.ly などの URL 短縮サービスを使うなど)。

それから、どの記事を Twitter に上げたか管理していないので、処理に時間がかかってしまう。
(重複した記事は投稿されず、Twitter 側で捨ててくれるようだ)
重複投稿を避けるには、どの記事を投稿したかデータベースで管理するなど、何らかの仕組みが必要だ。
タグ:RSS twitter Perl
posted by K/I at 18:29 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年10月26日

自動翻訳 - Google AJAX & エキサイト

馴染みのない分野の翻訳を頼まれて、しかも納期が厳しかったので自動翻訳のお世話になった。
実務に使ったのははじめてだ。
使用したのはフリーのサービスのみなので、翻訳品質はとても悪く、下訳にすらならない。
最初の大意をつかむための補助ツール程度。
ただ、慣れない分野の場合なら、全体の意味をざっととる手間が省けてかなり助かるし、単語レベルで訳語を拾い出すこともできて重宝だ。
有料の翻訳ツール、特に分野を特化したものならもっと良質の訳文が出てくるのかもしれないが、今のところ考えていない。

さて、フリーの自動翻訳サービスはいくつかあるが、実際に使ったのは Excite のものだ。
http://www.excite.co.jp/world/english/
対応言語数が多く、業務以外で時おり使わせてもらっている。

もう1つ試したのが Google の API。
日本語:

 
  (訳文はこちらに表示されます)
 

こちらは API の形式で提供されているので、上のように好きなところにはめこんで使えるところが良い。

今回試したのはこの 2 つだけだが、翻訳品質としては、Excite のほうがずっと良いようだ。
分野にも依るかもしれないが。
タグ:google JSAPI 言語
posted by K/I at 18:34 | 東京 ☔ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする

2009年08月23日

ルーター RV-S340NE を電話機から設定

前回の記事「ルーター RV-S340NE で IP マスカレード」の続編。

Web 関連の実験のために、DDNS サービスを利用して自宅のプライベートネットワーク内のサーバーをインターネット上に公開している。
先日の引越しで利用することになった RV-S340NE には、ファームウェアを自動更新する機能がついているのだが、更新時には再起動がかかり、WAN 側 IP アドレスが変わってしまって都合が悪い。
(自分が利用している DDNS の仕組み上の問題ではある)

そのため、ファームウェアの自動更新機能を OFF にすることにした。
取扱説明書には Web 設定画面上で設定変更できるように書かれているが、実際には設定できないようだ。
何らかの理由で除外されたのだろうか。

RV-S340NE は、電話機から各種設定が可能なので、それを試してみることにした。

まず、電話機の受話器を取り上げる。(「ツー」という音がする)
そして、電話機のダイヤルボタンでコマンドを入力する。
たとえば、ファームウェアを手動更新する(再起動更新有効)なら、
***889*1##
とボタンを押すと、しばらくして「設定が完了しました」というガイダンスが流れて電話が切れる。

何やら不思議な感動を覚える。。。
posted by K/I at 18:17 | 東京 ☀ | Comment(0) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする