賢者の漬け物石 http://k-ishik.seesaa.net/ Webシステム開発に関するあれこれ ja http://blogs.law.harvard.edu/tech/rss Webシステム開発に関するあれこれ Web 開発 プログラム システム Ｋ/Ｉ no http://k-ishik.seesaa.net/article/251795102.html Movable Typeでのログイン機能実装 Sun, 12 Feb 2012 08:55:26 +0900 MovableTypeでログイン機能を実装する方法を考える。ブログ記事管理を通常の MT 管理画面上でいつもどおりに行えるようにしたい。つまり、MT 管理画面上での：ブログ記事の投稿や変更テンプレートの改変が公開される記事に反映されるようにしたい。いろいろな方法があると思うが、以下のような仕組みを考えた：ログインが必要なコンテンツは、別ブログに分ける。ブログ記事、ウェブページはウェブ上に公開されない場所に保存させる。ブログ記事は PHP スクリプトから読み出して表示させる。　.. ブログ記事管理を通常の 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>
などとする。

また、アーカイブマッピングの [パス] で、
  • %i を index.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]

以上で設定は完了。 ]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/238305030.html ApacheのログをMySQLにはき出す Sat, 03 Dec 2011 20:31:00 +0900 Apacheのログファイルからアクセス解析するツールを作っていたのだが、アクセス数が多いサイトなのでログファイルのファイルサイズが大きく、読み出してデータベースに書き出すだけで一苦労。何かよい工夫は無いものか。。。と思っていたら、こんなものがあった。mod_log_sqlhttp://www.outoforder.cc/projects/apache/mod_log_sql/Apache ログを直接 MySQL に書き出してくれるらしいので、導入してみた。環境は以下のとおり：.. 何かよい工夫は無いものか。。。
と思っていたら、こんなものがあった。

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

設定が反映される。
ログは、ログファイルとデータベースの両方にはき出される。 ]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/194750095.html Redmineのインストール Thu, 07 Apr 2011 21:20:02 +0900 これまで trac を使っていたが、Redmine を使ってみることにした。以下、インストールメモ。インストールした環境は、Fedora 14。インストールした Redmine のバージョンは 1.1.2。Redmine.JP に掲載されているインストール手順を参考に作業した。http://redmine.jp/guide/RedmineInstall/(1) 必要なツール類のインストールRuby, Rails, Rack のバージョンは、記載されているバージョンと完全に一致.. 以下、インストールメモ。

インストールした環境は、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.example を config/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.example を config/email.yml にコピーし、設定変更する。
たとえば localhost を SMTP サーバーにするには、production: のところを
production:
  delivery_method: :smtp
  smtp_settings:
    address: localhost
    port: 25
    domain: メールドメイン名
のように設定する。
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/190533927.html 節電ポスター ブログパーツ Mon, 14 Mar 2011 09:38:40 +0900 今回の東北地方の震災での節電をよびかけるポスターが、「節電ポスター」( http://setsuden.tumblr.com/ ) というサイトで提供されています。これは、節電を呼びかけるポスターを印刷してあちこちに貼りましょう、というものです。これをブログパーツ化したものを作成しましたのでお知らせします。「節電ポスター」ブログパーツhttp://tan9.net/psvc/setsuden.jsブログに貼る場合は、以下のようにします。&lt;script type=&quo.. http://setsuden.tumblr.com/ ) というサイトで提供されています。
これは、節電を呼びかけるポスターを印刷してあちこちに貼りましょう、というものです。

これをブログパーツ化したものを作成しましたのでお知らせします。

「節電ポスター」ブログパーツ
http://tan9.net/psvc/setsuden.js

ブログに貼る場合は、以下のようにします。
<script type="text/javascript" src="http://tan9.net/psvc/setsuden.js?wd=253&ht=358&bgcol=&brdrcol=&updt=1&intvl=8&rndm=0"></script>
wd…画像横幅の最大値 (0なら無制限)
ht…画像高さの最大値 (0なら無制限)
bgcol…表示エリアの背景色 (ccccccなど、#は付けない)
brdrcol…表示エリアの枠の色 (ccccccなど、#は付けない)
updt…画像自動更新フラグ (0: 自動更新しない、1: 自動更新する)
intvl…画像の更新周期 (単位: 秒)
rndm…ランダム再生フラグ (0: シーケンス再生、1: ランダム再生)

wd と ht の両方に 0 以上の値を指定した場合、表示エリアは横幅wdピクセル、高さ htピクセルの大きさに固定され、画像はエリア内最大の大きさ (縦横比は保持) に縮小/拡大されます。

なお、画像URLなどはハードコーディングしているので、サイトの画像投稿は自動反映されません。

【2011年3月20日更新】
・ht, wd, bgcol, brdrcol パラメータを追加 ]]> 日記 Ｋ/Ｉ http://k-ishik.seesaa.net/article/187891799.html もくもく日記: IS03で実機デバッグ環境整備 Sat, 26 Feb 2011 17:01:16 +0900 第六回日本Androidの会埼玉支部ワークショップ開催日: 2011-02-26今回の自分のもくもくテーマ: IS03で実機デバッグ環境整備(1) IS03 のドライバーをインストールドライバーをダウンロードしてインストール。『IS03 用USB ドライバ - SHARP』http://k-tai.sharp.co.jp/support/a/is03/download/usb/(2) IS03 を接続USB接続モードを「高速転送モード」にすると、ドライバーのインストールがはじ..
開催日: 2011-02-26

今回の自分のもくもくテーマ: IS03で実機デバッグ環境整備

(1) IS03 のドライバーをインストール

ドライバーをダウンロードしてインストール。
『IS03 用USB ドライバ - SHARP』
http://k-tai.sharp.co.jp/support/a/is03/download/usb/

(2) IS03 を接続

USB接続モードを「高速転送モード」にすると、ドライバーのインストールがはじまる。
ところが、Android ADB Interface のドライバーインストールに失敗。

そこで。。。

(3) SDK ManagerでGoogle Usb Driver packageをインストール

これでもドライバーインストール失敗。
(これは必要だったのか？)

調べたら、IS03 専用のドライバーが必要だった。

(4) IS03 用のADB USBドライバをダウンロード

https://sh-dev.sharp.co.jp/android/modules/driver/index.php?/is03_adb/download

ドライバー更新して、ダウンロードしたドライバを指定したらうまくいった。

(5) SDK Manager でいろいろ更新したら、Eclipse の ADT のバージョンと合わなくなったので、そちらも更新。

EclipseからRunしたら、めでたくIS03上に表示された。

今回はここまで。 ]]> 日記 Ｋ/Ｉ http://k-ishik.seesaa.net/article/167858806.html 電子証明書によるクライアント認証 (Apache) Mon, 01 Nov 2010 01:16:40 +0900 銀行の企業向けインターネットバンキングなどで、よく「デジタル証明書」を使ってユーザー認証しているものがあるが、あれはどうやっているのだろうか?ちょっと調べてみた。Web サーバーが信頼する CA から発行した証明書を保有するクライアント (Webブラウザ) のみを信頼する、というのが「クライアント認証」の考え方のようだ。ここでは、CA は自前で用意してあるものとする。以下、以前まとめた下の関連記事の設定を前提に話を進める。【関連記事】PKI の認証局(CA)を構築する【Web.. ちょっと調べてみた。

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] をクリックすればアクセスできる。 ]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/166600000.html PostgreSQL 8.3 から 8.4 への移行 Thu, 21 Oct 2010 12:12:51 +0900 Fedora を 10 から 12 にアップグレードしたら、PostgreSQL が起動しなくなった。PostgreSQL のバージョンが 8.3 から 8.4 にバージョンアップしたため、データベースファイルが対応しなくなったからだ。すでに 8.4 にアップグレードされているから PostgreSQL も起動しないので、pg_dump もできない。しかたなく、8.3 環境を用意して /var/lib/pgsql/data ディレクトリをごっそりそちらにコピーし、pg_dum.. PostgreSQL のバージョンが 8.3 から 8.4 にバージョンアップしたため、データベースファイルが対応しなくなったからだ。
すでに 8.4 にアップグレードされているから PostgreSQL も起動しないので、pg_dump もできない。
しかたなく、8.3 環境を用意して /var/lib/pgsql/data ディレクトリをごっそりそちらにコピーし、pg_dumpall した。
この移行作業のめんどくささはなんとかならないものか？
ほかの人はどうやって対応しているのだろうか。

ちなみに、たまたまインストールしてあった Ubunto では、コピーした data ディレクトリでうまく動作しなかった。
Fedora 11 でもダメで、Fedora 10 にしたらうまくいった。
Ubundo は設定がいろいろ違っていて合わせるのが面倒だったので断念。
Fedora 11 がダメだった理由は不明。
]]> 日記 Ｋ/Ｉ http://k-ishik.seesaa.net/article/158008768.html HTML5 のフォーム関連タグ Sun, 01 Aug 2010 08:05:00 +0900 【関連記事】HTML4/XHTML1 から HTML5 への変更点HTML5 のセクション関連タグHTML5 のコンテンツグループ化関連タグHTML5 のテキストの意味付け関連タグHTML5 の埋め込みコンテンツ関連タグ●参考4.10 Forms - HTML5追加されたフォーム関連要素 要素 カテゴリ タグ内に含むもの 説明 datalist flow content ph..
【関連記事】
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>
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/157410309.html HTML5 のテキストの意味付け関連タグ Thu, 29 Jul 2010 11:14:59 +0900 【関連記事】HTML4/XHTML1 から HTML5 への変更点HTML5 のセクション関連タグHTML5 のコンテンツグループ化関連タグHTML5 の埋め込みコンテンツ関連タグHTML5 のフォーム関連タグ●参考4.6 Text-level semantics - HTML5テキストの意味付け関連要素一覧 要素 カテゴリ タグ内に含むもの 説明 time flow content ..
【関連記事】
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 テキストの一部を強調表示するのに使う。
em や strong と異なり、本来の文章の意図とは別の意味付けから強調したい場合に用いる (あとから蛍光ペンでマーカーをつける感覚)。
たとえば以下の状況で使われる。
  • 引用した文の一部を強調表示 (もともとは強調表示されていない) → 例の (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>
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/157459568.html HTML5 のコンテンツグループ化関連タグ Mon, 26 Jul 2010 07:07:08 +0900 【関連記事】 HTML4/XHTML1 から HTML5 への変更点 HTML5 のセクション関連タグ HTML5 のテキストの意味付け関連タグ HTML5 の埋め込みコンテンツ関連タグ HTML5 のフォーム関連タグ●参考4.5 Grouping content - HTML5コンテンツグループ化関連要素一覧 要素 カテゴリ タグ内に含むもの 説明 figure flow co..
【関連記事】
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 要素を説明するもの。

figure、figcaption 要素の属性 (グローバル属性を除く)

figure と figcaption 要素の属性は、グローバル属性のみ。

例

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>この事例は、法廷外で解決した。
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/157189077.html HTML5 の埋め込みコンテンツ関連タグ Sun, 25 Jul 2010 17:24:12 +0900 【関連記事】 HTML4/XHTML1 から HTML5 への変更点 HTML5 のセクション関連タグ HTML5 のコンテンツグループ化関連タグ HTML5 のテキストの意味付け関連タグ HTML5 のフォーム関連タグ●参考4.8 Embedded content - HTML5埋め込みコンテンツ関連要素一覧 要素 カテゴリ タグ内に含むもの 説明 embed flow con..
【関連記事】
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 の表示に対応していません。
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/156794848.html HTML5 のセクション関連タグ Mon, 19 Jul 2010 11:40:51 +0900 HTML5 では、セクション関連のタグが大きく変更されている。 W3C のサイトでは、以下のページで解説されている。 4.4 Sections &#8212; HTML5 この文書をもとに、セクション関連タグを整理してみた。 【関連記事】 HTML4/XHTML1 から HTML5 への変更点 HTML5 のコンテンツグループ化関連タグ HTML5 のテキストの意味付け関連タグ 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 本文の補足記事。
注記や補足情報など、本文の主題から逸れた内容の記述に使う。
h1～h6 flow content
heading content
formatBlock candidate		 phrasing content ヘッダー。
hgroup flow content
heading content
formatBlock candidate		 1つ以上の h1, h2, h3, h4, h5, h6 要素 ヘッダーが多階層から成る場合に、h1～h6 要素をまとめるのに使う。
ページのサマリーを作る時、hgroup のところは h1～h6 の最上位のものが使われる。
header flow content
formatBlock candidate		 flow content (header, footer 要素を除く) article の導入部分に使用する。
h1～h6、hgroup などをまとめたもの。
目次、検索欄、関連ロゴなどの表示にも使える。
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>
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/156673822.html HTML4/XHTML1 から HTML5 への変更点 Sun, 18 Jul 2010 00:20:25 +0900 HTML5 が話題になってずいぶん経ったけれど、いったい何がどう変わったのだろう? 現状ではほとんど何の恩恵も受けていない気がする。 そういえば HTML5 が何者なのか、そもそもよく知らないではないか。 そんなわけで W3C のサイトを覗いてみたところ、こんなものが置いてあった。 『HTML5 differences from HTML4』 ありがたや、まさにこんな解説がほしかった。 ..
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日】
「コンテンツのグループ化関連タグ」を別記事に独立
]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/154580635.html Android アプリ開発環境の構築 Sun, 27 Jun 2010 00:29:18 +0900 Android SDK をインストールしたので、その作業メモ。Android Developershttp://developer.android.com/index.html1. インストール前の準備サポートされている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)今回は、W..
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

今回はここまで。 ]]> 技術メモ Ｋ/Ｉ http://k-ishik.seesaa.net/article/151585574.html MeeGo を試してみた Sun, 30 May 2010 18:58:43 +0900 モバイル向けLinuxプラットフォーム "MeeGo" の正式版がリリースされたので、Net PC で起動させてみた。Net PC 向けは Atom にのみ対応のようだ。今回は、Acer の ASPIRE one (BCM92045NMD) を使用した。※ちなみに、Celeron PC で試したら、最初の起動画面は表示されるものの起動しようとすると黒画面のまま先に進まなかった。VMware でも同じ。印象としては、全体的によく作り込んであると感じた。ただし、デフォルトの日本語.. 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" の２種類が用意されている。
今回は "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など、複数のサービスを使用できる。

ちなみに、アプリケーション画面のシステムツールからターミナルを起動できる。
いざという時にはこれが使えそう。 ]]> 技術メモ Ｋ/Ｉ