Gmail の Docs Viewer が新たに 12 種類のファイル形式に対応

10 日ほど前のニュースなので遅きに失した感はあるけど、ぼくにとっては Gmail の大きな改善だったのでエントリーにする。

Gmail には Docs Viewer という機能がある。メールに添付されたドキュメント・ファイルを、HTML ファイルに変換してウェブ上で閲覧できる機能。今まで古い Excel や Word のファイルがサポートされていた。「編集」を要しない添付ファイルを確認する場合、Excel や Word を起動せずに中身を見られるのが便利。特にぼくの場合、自宅のマシンには Microsoft Office が入っていないので、この閲覧機能は重宝していた。

この Docs Viewr 機能、対応しているドキュメント・ファイルの種類が少ないのが難点だったけど、今回 12 種類ものファイル形式に新たに対応した。

• 12 new file formats in the Google Docs Viewer - Official Gmail Blog

対応した形式は以下の通り:

• Microsoft Excel (.xls and .xlsx)
• Microsoft PowerPoint 2007 / 2010 (.pptx)
• Apple Pages (.pages)
• Adobe Illustrator (.ai)
• Adobe Photoshop (.psd)
• Autodesk AutoCad (.dxf)
• Scalable Vector Graphics (.svg)
• PostScript (.eps, .ps)
• TrueType (.ttf)
• XML Paper Specification (.xps)

iPad 等でも利用可能

これらのドキュメント・ファイルを HTML へ変換してくれるということは、ウェブ・ブラウザーさえあれば何でも見られるということ。ということは PC 上のウェブ・ブラウザーだけじゃなくて、iPhone や iPad の Safari (ウェブ・ブラウザー) でもメールに添付された Excel 等のドキュメント・ファイルを閲覧できることを意味する。

実際、iPad の Safari で Gmail にアクセスし、添付ファイル付メールから添付ファイルをタップすると、別タブが開いて中身を閲覧することができた。こういうモバイル環境でも Excel etc. が読めるというのは本当に助かる。

蛇足

Gmail で「添付ファイル付メール」を検索するには「has:attachment」という検索式を使う。

HTML5 Tech Talk -- Canvas 編

告知通り HTML5 の Tech Talk に参加した。セッションは二つ。

• オフライン・ウェブ・アプリケーションを作るための API の説明
• HTML5 で絵を描くための Canvas の説明

本エントリーは後者の Canvas セッションのメモ書き。

Canvas VS. SVG

ウェブ・ブラウザーで絵を描くといったら、SVG が有名。Canvas は何が違うのか? 相違点を列挙して下さった。

Canvas

• JavaScript を使って描画
• 描いた図を個別に認識できない (JavaScript で後からいじれない: 位置をずらすとかね)
• 描画が高速
• ピクセル操作が可能

SVG

• XML 形式のマークアップで図を表現
• 描いた図を個別に認識できる (JavaScript で後からいじれる)
• 要素が増えると重くなる
• ピクセル操作は不可能

結果、Canvas はマンデルグローブ集合のような複雑な図を描くのが得意で、ウィジェットのやうにユーザーが使う UI 部品を作るのが苦手となる。Canvas と SVG は適材適所で使うと良いらしい。

実践編

この後、Canvas で絵を描くための命令を個々に紹介して下さった。その例を見て、絵を描いてみるよ。

「Canvas Test」ってリンクをクリックすると、四角が表示される。

Canvas Test

<script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('canvas-test');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');

      // Path
      ctx.moveTo(50,50);
      ctx.lineTo(50,75);
      ctx.lineTo(75,75);
      ctx.lineTo(75,50);
      ctx.closePath();
      ctx.stroke();
    }
  }
</script>
<canvas id="canvas-test" width="100" height="100"></canvas>
<a href="javascript:draw();">Canvas Test</a>

Canvas 要素で描画領域を作って、その要素から getContext が返すインスタンスに対して「JavaScript で描画を行なう」というのが基本。

で、色々と関数を教えてもらった。

beginPath, lineTo, closePath, arc, arcto, bezierCurveTo, strokeStyle, fillStyle, stroke, fill

何か見たことのある命令ばっかり。

PostScript!!!

違うのは、PostScript の四則演算・for 文・if 文を JavaScript で書けること。こりゃ便利。昔の PostScript のコードも移植できるかもしれない。Canvas 楽しいねぇ。誰か Canvas の BlueBook を出さないかしらん。

はてなリング「coComment」のロゴ

はてなリング「coComment」のロゴを作ったので、ソースを公開。

ロゴの意匠は、coComment の最初の二文字「co」を大きく配し、残る「comment」を下に置いたもの。背景色は、coComment のブックマークレットと同じ色にした。

PostScript ソース

ソース・コードは PostScript を直書きしたもの。構想 10 分。コーディング、20 分程の作品。

%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 200 200
%%Title: cocomment.eps
%%Creator: Masayuki Ataka
%%CreationDate: Wed Apr 26 18:25:39 2006
%%EndComments

64 dict begin

% Background 318afc
0.19 0.54 0.99 setrgbcolor
0 0 moveto
200 0 rlineto
0 200 rlineto
-200 0 rlineto
closepath
fill

% CO Font
1 1 1 setrgbcolor
/Helvetica-Bold findfont 180 scalefont setfont

5 80 moveto
(c) show

85 80 moveto
(o) show

/Helvetica-Narrow-Bold findfont 54 scalefont setfont
1 30 moveto
(comment) show


end
showpage
%%EOF

これを cocomment.eps という名前で保存し、convert コマンドで 60x60 のサイズにリサイズした。

$ convert cocomment.eps -resize 60x60 cocomment.png

firefox で N-Up

1 枚の紙に複数ページを印刷することを N-Up というらしい。袋とじ印刷は 2-Up の典型例。

Linux には、PostScript ファイルを N-up するためのコマンド psnup がある。

$ psnup -4 foo.ps > bar.ps

上のようにして N アップする枚数を指定する。N-Up に指定できるのは、2, 4, 8, 16, 32 の倍数。

psnup はフィルターなので、そのまま lpr に渡せる。

$ psnup -4 foo.ps > lpr -Pps01

firefox 1.0.X 系での N-Up

Mozilla や firefox 1.0.X 系で N-Up することができれば、ページ数の多いまとめ系サイトなどを印刷する時に紙の節約になる。方法は簡単で、印刷用ダイアログのプリンター設定の隣にある「プロパティー」から Print Command を編集する。例えば、

lpr ${MOZ_PRINTER_NAME:+'-P'}${MOZ_PRINTER_NAME}

のようになっているところを

psnup -2 | lpr ${MOZ_PRINTER_NAME:+'-P'}${MOZ_PRINTER_NAME}

という風に psnup コマンドを入れる。

firefox 1.5

最新の firefox 1.5 からは、プロパティーから Print Command の設定がなくなってしまった。

firefox のアドレス・バーに

about:config

というアドレスを打ち込んで、フィルター部分に「print_command」とすると、firefox 1.0 系と同じような Print Command の設定を拝むことができる。これを、上と同じように psnup を入れた形に直せば N-Up できるだろうとやってみたのだけど N-Up されなかった。

firefox 1.5 系から、プリント周りの仕様が変わってしまったのかしらん。そんなわけで敗北。なにか情報がありましたら、お知らせ下さいませ。

PostScript... 更なる深淵へ

はてなリング「ChangeLog メモ」のロゴの PostScript ソースを公開したところ、/home/pochi/ChangeLog で記事が紹介されて少しアクセスが増えた。大したコードでもないのに、

PostScript は Forth と同じようなスタック型の言語。

面白いしわりと簡単なので読んだことがなければ、

ソースを読んでみてくださいませ。

ちょっとだけ視野が広がるです。

と書かれてしまっては、何か恥ずかしいです。ハイ ^^;

せっかく来て下すった方々に、もっと視野の広がるコードを二つほど紹介します。

アニメーション GIF のソース

手前味噌な自分の記事を紹介。

PostScript は画像じゃない。ページ記述言語と呼ばれる言語。一つの PostScript ファイルの中に、1 ページ、2 ページという風にページがある。だから、(例えば) 10 枚の画像を、1 ページ 1 枚、10 ページの一つのファイルに含めることも可能。

PostScript で 10 ページ分の画像を書いておき、それを convert コマンドを使って gif に変換するとアニメーション GIF を作ることができる。そうやって作ったのが上の GIF アニメ。PostScript のソースは

• orz.ps

にあります。30 行ぽっちの PostScript コード。

PostScript の藝術

邪悪な PostScript コード・コンテスト (The Obfuscated PostScript Contest) というのがある。解読不能なコードで最大の結果を生みだすことを競うソース・コードのコンテスト。その入選作に、たった 11 行でレイ・トレーシングを行ってしまうコードがある。

このコンテストは「プログラミング言語と文学 Programming language and literature というサイトで知った。残念なことに、このサイトから張られているコンテストのサイトへのリンクは切れている。とりあえず、

• http://web.mit.edu/afs/sipb/contrib/postscript/obfuscated-1993/

に、入選作 (らしき) ソースが置いてあるみたい。問題のコードは Tiny_RayTracing.ps というファイル。古いコンテストだし、いつソースが失われるとも分からないので、ここでソースを載せてしまいませう。

%!OPS-1.0 %%Creator: HAYAKAWA,Takashi<[email protected]>
/A/copy/p/floor/q/gt/S/add/n/exch/i/index/J/ifelse/r/roll/w/div/H{{loop}stopped
Y}def/t/and/C/neg/T/dup/h/exp/Y/pop/d/mul/s/cvi/e/sqrt/R/rlineto{load def}H 300
T translate(V2L&1i2A00053r45hNvQXz&vUX&UOvQXzFJ!FJ!J!O&Y43d9rE3IaN96r63rvx2dcaN
G&140N7!U&4C577d7!z&&93r6IQO2Z4o3AQYaNlxS2w!!f&nY9wn7wpSps1t1S!D&cjS5o32rS4oS3o
Z&blxC1SdC9n5dh!I&3STinTinTinY!B&V0R0VRVC0R!N&3A3Axe1nwc!l&993dC99Cc96raN!a&1CD
E&YYY!F&&vGYx4oGbxSd0nq&3IGbxSGY4Ixwca3AlvvUkbQkdbGYx4ofwnw!&vlx2w13wSb8Z4wS!J!
c&j1idj2id42rd!X&4I3Ax52r8Ia3A3Ax65rTdCS4iw5o5IxnwTTd32rCST0q&eCST0q&D1!&EYE0!J
&EYEY0!J0q!x&jd5o32rd4odSS!K&WCVW!Q&31C85d4!k&X&E9!&1!J!v&6A!b&7o!o&1r!j&43r!W)
{( )T 0 4 3 r put T(/)q{T(9)q{cvn}{s}J}{($)q{[}{]}J}J cvx}forall 270{def}H
K{K{L setgray moveto B fill}for Y}for showpage

たったこれだけのコードで得られる結果はどんなものか! それが下の絵。藝術とは、かういふものを云うんでせうなぁ。

はてなリング「ChangeLog メモ」のロゴ

はてなリング「ChangeLog メモ」のロゴを作ったので、ソースを公開しとく。

ロゴの意匠は、はてなリングの輪っかを「Changelog」の C と l に当てて「Changelog Memo」と書いたもの。色は「はてな」にちなんで青ベース。

PostScript ソース

ソース・コードは PostScript を直書きしたもの。30 分程の作品。

配色と文字のバランスに時間をかけたけど、センスの無さが表に出た感じ Xp。もっと格好よく直せる人が居たら遠慮なく直して下さい。

%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 200 200
%%Title: changelogmemo.eps
%%Creator: Masayuki Ataka
%%CreationDate: Fri Nov 25 11:00:28 2005
%%EndComments

64 dict begin

%
% Change
%
/Helvetica-Bold  findfont 36 scalefont setfont
15 setlinewidth
0 0 1 setrgbcolor

80 110 65 30 330 arc
stroke

30 80 moveto
(hange) show

%
% Log
%
0.65 0.80 1.0 setrgbcolor

newpath
80 110 65 330 30 arc
stroke

150 80 moveto
(og) show

%
% Memo
%
/Helvetica-Bold  findfont 46 scalefont setfont
60 20 moveto
(Memo) show

end
showpage
%%EOF

これを changelogmemo.eps という名前で保存して、convert コマンドで 60x60 のサイズにリサイズした。

$ convert changelogmemo.eps -resize 60x60 changelogmemo.png

Texinfo マニュアルの縮少印刷に難 |PostScript|

GNU 関連のマニュアルは Texinfo という TeX の方言で書かれてる。例えば、Texinfo 自身、GNU Emacs、GNU wget、autoconf、gcc、screen、などなど。

いざマニュアルを印刷しようとすると、そのページ量に圧倒される。GNU Emacs のマニュアルなんて 800 ページを越えている。いくら僕の面の皮が厚いからって、そんなに印刷機を動かす勇気はない。そこで psnup コマンドを利用して 1 枚に複数ページを印刷してる。

$ psnup -4 -m0.5cm manual.ps | lpr

-4 オプションで一枚に 4 ページ印刷。両面印刷が可能なら、一枚の紙に 8 ページ分印刷できる。つまり、800 ページのマニュアルを 100 枚の紙で印刷できる計算。これ位いなら、人目を忍んでちょっとやってみようかな... という気になる。ちなみに、-m0.5cm は、紙のふちに 0.5cm のマージンを取る設定。そうしないと、パンチ穴を開けるスペースのないマニュアルが時々ある。

さて、そうやって印刷したものを読んでると、文字が汚いと思うことがある。e の横棒が消えそうになってたり、t の横棒が見えにくかったり。

Texinfo は TeX ベースだから高品質。だから、問題はプリンターの方にあるんだろう、と思ってた。実はそれが大間違い。TeX から作った PS ファイルでは、アウトライン・フォントじゃなくてビットマップ・フォントが使われてる。ビットマップ・フォントを 1/4 に小さくすれば見難くなるのは道理。

LaTeX だと PSNFSS のお蔭で、簡単にアウトライン・フォントの一種である PostScript フォントが使えるけど、Texinfo は LaTeX ベースじゃなくて TeX ベース。PS フォントを使うためには、TeX ファイルのソース、つまり texinfo.tex をいじらなくちゃいけない。

というわけで、texinfo.tex で PostScript フォントを使う pstexinfo.tex なんてのが色んな人達の手で書かれていて、Texinfo ML にも投稿されてるけど、本家ではメインの開発が忙がしくて取り込む気配がない。原因も解決策も分かってるのに、そこから先に進まない。世の中、上手くいかないものだ。

orz.ps |PostScript|

スラッシュドットで、アスキー・アート orz をコマンドとして実装するなら、どんな機能を持たせるか という話題が出た。

いくつもコメントがついたけど、面白かったのは PROGRESS BAR を表示させるというもの。引用すると、

コアダンプでも、デバッグ情報送信でも、こんなアニメーションを…

........orz
.......o.rz
......o..rz
.....o...rz
....o....rz
...o.....rz
..o......rz
.o.......rz
o........rz

そこで、アニメーション GIF を作ってみた。

ソースは PostScript。Perl や Ruby で書くのもいいけれど、こういうマニアックなのもいい?

%!PS-Adobe-3.0
%%BoundingBox: 0 0 100 20
%%Title: orz.ps
%%Creator: @aka
%%CreationDate: Thu May 19 23:06:30 2005
%%EndComments

64 dict begin

/dots 14 def
/Helvetica-Bold findfont 18 scalefont setfont

/orz {
  0 1 dots {
    /head exch def
    0 0 moveto
    dots head sub { (.) show } repeat
    (o) show
    head { (.) show } repeat
    (rz) show
    showpage
  } for
} def

orz

end
showpage
%%EOF

上のコードを orz.ps として保存し、convert コマンドにかけて出来上がり。

$ convert orz.ps orz.gif

首の長さは、変数 dots で変更できる。フォントは Helvetica-Bold、サイズは 18 ポイント。気に入らなければ、そこら辺をいじって自由に書き直されたし。

問題は、これがコマンドじゃないって所だな。