2010-05-27

「Flashクリエータの為のHTML5入門勉強会」メモ

「Flashクリエータの為のHTML5入門勉強会」というのを思いついたのでメモ。

HTML5ってなに？

ウェブアプリケーションの為のHTML
- 今までのHTMLは文章を共有するのが主目的
- AjaxやWeb2.0の登場でウェブがアプリケーションになってきた
- ウェブアプリを開発しやすいように新しく仕様を作り直したのがHTML5
HTMLなので…
- プレーンテキスト
- ウェブ標準
  - プラグインが必要ない
  - iPhone, iPadでも動く！
- 情報が構造化できる
  - 表現と構造の分離
  - 検索に強い
  - アクセシビリティも高い
対応ブラウザ
- FireFox
- Safari
- Chrome
- Opera
- ( IE9 )

なにができるのか？

canvas
- 動的に画像を生成／編集ができる
video/audio
- プラグイン無しで、動画と音声の再生／制御が可能
改良されたフォーム
- 日付入力（カレンダー）
- 数値入力フィールド
- スライダー
- バリデーション
- オートコンプリート
ドラッグ&ドロップ

HTML5関連技術

上記で説明したものは狭義のHTML5。世間でHTML5と言われているものは下記のようなものも含む場合もある。

CSS3
- CSSの最新バージョン
- グラデーション
- ドロップシャドウ
- 角丸
- 変形
  - 移動
  - 回転
  - 拡大縮小
  - ゆがみ
- アニメーション
- ウェブフォント
SVG
- ベクラーグラフィックスがブラウザ上で利用可能
- SVGフォント
- SVGアニメーション
JavaScript
- 動的にHTMLの要素やCSSのプロパティを操作できる

Flashからの乗り換え案内

FLV (動画)
- videoタグ
Sprite, Graphics (ベクターブラフィック)
- SVG
MovieClip (アニメーション)
- CSS3アニメーション
- SVGアニメーション
ActionScript
- JavaScript
BitMap (ピクセル画像の操作)
- canvas

まだ乗り換えられなさそうなもの

3D
- canvasの3D版であるWebGLが現在策定中
ウェブカメラなどの外部デバイスとのやり取り
- HTML Device が現在策定中

HTML5 チュートリアル

HTML5
- 基礎
- video要素
  - 使用できるコンテナとコーデックがブラウザ毎に異なるので注意
    - WebMで統一される？？
CSS3
- グラデーション
- ドロップシャドウ
- 角丸
- 変形
  - 移動
  - 回転
  - 拡大縮小
  - ゆがみ
- アニメーション
- ウェブフォント
SVG
- テキストエディタで直接書く
- Illustratorから書き出し
  - 画像の埋め込み
  - SVGフォント
- HTMLへの埋め込み方法
  - svg要素(Firefoxでhtml5を有効にすれば可能)
  - object
  - img
- CSS3で変形もできる
JavaScript
- ActionScriptとは親戚関係
  - クラスが存在しない
    - プロトタイプ型のオブジェクト指向言語
- HTMLへの適用方法
  - script要素
- DOM
  - HTMLの要素を操作
  - document.getElementById()
  - document.createElement()
  - appendChild()
  - イベント（インタラクティブに）
    - addEventListener()
- JavaScriptを使ったアニメーション
  - CSS3との連携
  - setInterval() を利用したアニメーション
    - Event.ENTER_FRAME の代わりに setInterval() を使用
    - Tweener の代わりに、jQuery の animate()
    - CSS3アニメーションを使用したほうが早いし、分かりやすい
canvas
- 画像の描画
- シャドウ
- テキストの描画
- 変形
- フィルタ

以上。

2010-02-25

落合尚之版『罪と罰 A Falsified Romance』の人物名に関するメモ

裁弥勒 (たちみろく)　= ロジオン・ロマーヌイチ・ラスコーリニコフ

主人公。原作で該当する人物は、ロジオン・ロマーヌイチ・ラスコーリニコフ。

ラスコーリニコフ=分離派(ラスコーリニキ)=裁ち切る=裁

原作の主人公の姓であるラスコーリニコフとは、ロシア正教の異端である分離派（ラスコーリニキ）が由来。
老婆の頭を斧で「叩き割った」事で人間社会から裁ち切られてしまった主人公の立場を象徴するような名前である。

ロジオン=イロジオン=英雄=救世主=弥勒

ロジオンとは薔薇の意味だが、江川卓説によると一文字違いのイロジオン（英雄）のもじり。
原作ではラスコーリニコフがキリストになぞらえるような描写が数回でてくるため、英雄=救世主という連想から落合版では仏教で衆生を救済すると言われている弥勒菩薩の名前を主人公につけたのものと思われる。

馬場光 (ばばひかる) = アリョーナ・イワーノブナ

原作ではラスコーリニコフにより斧で惨殺される金貸し老婆に該当する人物。

老婆=婆(ばば)=馬場

馬場という名前はおそらく金貸し老婆＝婆(ばば)のもじりだと思われる。

アリョーナ=ヘレネー=ヘレー(太陽の光)=ヒカリ

金貸し老婆の名前であるアリョーナはギリシア語のヘレー(太陽の光)を語源とするヘレネーが由来。

島津理沙（しまづりさ）= リザベータ・イワーノブナ

原作では金貸し老婆アリョーナの妹に該当する人物。

リザベータ=リサ

理沙という名前はリザベータのもじりだと思われる。

リザベータ・イワーノブナ = リザベータ・スメルジャーシチャヤ = 島津？

理沙の名字である島津の由来がよくわからない。リザベータといえば『カラマーゾフの兄弟』にでてくるリザベータ・スメルジャーシチャヤが連想されるが、スメルジャーシチャヤ=スメルジ＝スメジ=島津というこじつけも考えられなくもないかも。

首藤魁 (すどうかい) = スビドリガイロフ

首藤に関しては原作で該当する人物スビドリガイロフの音をもとに日本語名にしているものと思われる。

飴屋菊男 (あめやきくお) = セミョーン・ザハイルイチ・マルメラードフ

原作では酔いどれ官吏であるマルメラードフに該当する人物。

マルメラードフ = マルメラード（マーマレード）= お砂糖のような姓 = 飴屋

ドスト・エフスキーの創作ノートにはマルメラードフに関して「お砂糖のような姓」という記述があり、マルメラード（マーマーレード）からマルメラードフと名付けられたようである。
落合版では「お砂糖のような姓」ということで飴屋という名前になっているのではないかと思われる。

セミョーン = シメオン（聞く）= きく = 菊男

セミョーンとはヘブライ語のシメオン（聞く）が語源。ここから落合版では「聞く=きく」ということで菊男と名付けたのではないだろうか。

飴屋英知香（あめやえちか）／旧姓園山 (そのやま) = ソフィア・セミョーノブナ・マルメラードワ

原作ではマルメラードフの娘であるソフィア（ソーニャ）に該当する人物（一部、マルメラードフの妻であるカテリーナに該当する部分もあり。）
落合版では飴屋菊男の後妻という設定。

カペルナウーモフ = カペナウム（カファルナウム） = 園山？

原作でソフィアはカペルナウーモフという名前の一家が暮らす家に間借りをしている。カペルナウーモフとはイエスが伝導を始めた地カペナウム（カファルナウム）が語源であり、そこから英知香の旧姓である園山という名前が付けられた可能性がある。

ソフィア＝英知＝英知香

ソフィアとは英知が語源の名前であり、そこから英知香という日本語名がつけられものと思われる。ちなみにエチカとはラテン語で「倫理」を表す語でもある。

2009-10-13

『計算機プログラムの構造と解釈第二版』1章手続きによる抽象の構築 (1-4ページ)

Lisp SICP

1.1 プログラムの要素

強力な言語には３つの仕掛けがある

基本式

言語が関わる単純なものを表す

組み合わせ法

より単純なものから合成物を作る

抽象化法

合成物に名をつけ、単一のものとして扱う

プログラムは２つの要素を扱う

データ
- 処理対象
手続き
- 処理方法の記述

強力なプログラム言語は基本的データと基本的手続きが記述でき、手続きとデータを組み合わせたり抽象化したりする手段を持たなければならない。

1.1.1 式

基本書式

値
(演算子被演算子)

例）

34 ;34
"hoge" ;"hoge"
(+ 4 5)  ;4+5
(- 10 45) ;10-45
(* 2 3) ;2*3
(/ 9 3) ;9/3

括弧で囲まれた手続きを「組み合わせ」(combinations)という。

組み合わせの値は演算子が指定する手続きを、被演算子の値である引数(arguments)に作用させて得る

演算子を被演算子の左に置く書き方を前置記法(prefix notation)という

前置記法の特徴

任意個の引数をとれる

(+ 21 35 12 7) ;21+35+12+7

入れ子にできる

(+ (* 3 5) (- 10 6)) ;(3*5)+(10-6)

インデントの方法

(+ (* 3 (+ (* 2 4) (+ 3 5))) (+ (- 10 7) 6))

(+ (* 3
      (+ (* 2 4)
         (+ 3 5)))
   (+ (- 10 7)
      6))

1.1.2 名前と環境

下記のように名前をつかって変数を宣言できる

書式

(define 名前値)

※値は式でも良い

例

(define minit 60)
(define hour (* minit 60))

2009-10-07

Flash が HTML5 + SVG + Canvas + JavaScript のオーサリングツールになる日

flash html5 canvas svg javascript

最近、HTML5 vs Flash みたいな論調があったりしますが、よくよく考えたら HTML5 と対立してるのは Flash ではなく SWFファイルだと気づいた。

WWW は、「どのコンピュータでも、誰でも読めて、誰でも書ける」という基本理念から発生したメディアである。HTMLファイルがプレーンテキストになっているのはそのためだ。なので、バイナリファイルである SWF は「誰でも書けて、誰でも読める」ウェブとはそもそも相容れないものだと僕は思っている。

冒頭でも書いたが、HTML5 が Flash を駆逐するのではないかというような話が最近でてきているけど、Flash はオーサリングツールであり、駆逐されるとすればそれは SWF ファイルということになる。よくわからないバイナリファイルが消えてくれるのは個人的には大賛成だ。

だけど、SWF が消えたからといって Flash がなくなるとは限らない。逆に Flash は根強く生き続けるんじゃないかと思う。確かに Flash は SWF ファイルを作るためのソフトなんだけど、SWF の代わりに HTML5 + SVG + Canvas + JavaScript を Flash から書き出すことは技術的に不可能じゃないだろう。Flash に慣れ親しんだユーザは沢山いるはずなので、そのような機能が追加されればウェブ標準はもっと広まるだろうし、「誰でも読めて、誰でも書ける」ウェブが実現されるんじゃないかと思う。

オーサリングツールとしての Flash や、言語としとしての ActionScript は個人的にすごい好きなので、Adobe さんには是非とも検討していただきたいところである。

2009-09-14

PDF/PPTリンクをGoogle Docs へのリンクへ自動変換するブックマークレットをつくった

javascript bookmarklet google

@gladdesign さんのつぶやきを受け、PDF/PPTリンクを Goole Docs へのリンクへ自動変換するブックマークレットをつくってみた。

これのブックマークレットとかさくっと作ってくれないかな誰か: ネット上にあるあらゆるPDF/PPTファイルをGoogle Document Viewerで！ - IDEA*IDEA http://kuex.us/207b

以下をコピペしてご利用ください。

javascript:(function(){var a=document.getElementsByTagName('a');var g='http://docs.google.com/';var r=new RegExp('^'+g);var l=a.length;for(var i=0;i<l;i++){(function(c){var h=c.href;if(h.match(/.*(pdf|ppt)$/)&&h.match(r)==null){var n=document.createElement('a');n.href=g+"gview?url="+h;n.innerHTML=" <img border='0' src='"+g+"gview/images/goog_logo_bw_1.png' /> ";c.parentNode.insertBefore(n,c.nextSibling);}})(a[i]);}})()

動作確認済み: Safari 4, Firefox 3.5, Chrome 4,IE6, IE7

追記

ちょっと改良した(20090914)
@gladdesignさんに解説記事を書いていただきました
- 【TOOL】ネット上にあるあらゆるPDF/PPTファイルをGoogle Document Viewerで閲覧できるようにするブックマークレット『PDF2GDOCS』

2009-09-12

C++ での配列についてメモ

c++

C++ での配列は

型 配列名[配列の数];

という書式で宣言する。

C++ での配列の例

#include <iostream>
using namespace std;

int main() {
	int array[20]; //int型の配列を要素数20で宣言
	int i;

	for(i=0; i < 20; i++){
		array[i] = i; //個々の配列に数値を代入
	}

	for(i=0; i < 20; i++){
		cout << "array[" << i << "] = " << array[i] << endl; //個々の配列の値を出力
	}
	
	return 0;
}

以下実行結果

array[0] = 0
array[1] = 1
array[2] = 2
array[3] = 3
array[4] = 4
array[5] = 5
array[6] = 6
array[7] = 7
array[8] = 8
array[9] = 9
array[10] = 10
array[11] = 11
array[12] = 12
array[13] = 13
array[14] = 14
array[15] = 15
array[16] = 16
array[17] = 17
array[18] = 18
array[19] = 19

ちなみに

ロベールのＣ＋＋教室には、ちなみに、配列変数を宣言するときには [ ] の中に変数は入れられませんという記述があるのだが、試してみたところコンパイルできてしまった。

#include <iostream>
using namespace std;

int main()
{
	int i = 4;
	int a[i];

	a[2] = 30;

	cout << "a[2] = " << a[2] << endl;

	return 0;
}

結果

a[2] = 30

C++ の仕様が変わったんだろうか？　それともコンパイラのやさしさ？（ちなみに、コンパイラは gcc 4.0.1 ）

2009-09-12

JavaScript の為のドキュメント作成ツール jsdoc-toolkit

javascript

JavaScript用のドキュメント作成ツール jsdoc-toolkit というものを見つけた。
jsdoc-toolkit 自身も JavaScript で記述されているのだが、Rhino を使って動作するため、実際に動かすには Java Runtime 環境が必要。

jsdoc-toolkit を動かす為のシェルスクリプトをつくってみた

jsdoc-toolkit を動かす際は下記のようなコマンドを打つ必要がある。

$ java -jar jsrun.jar app/run.js -a -t=templates/jsdoc  jsのファイル名

でも、いちいち打つのが面倒なのでシェルスクリプトを作ってみた。

#!/bin/bash

#jsdoc-toolkit が設置されているディレクトリのパス
_jsdocDir=~/bin/jsdoc-toolkit


_file=$1  # ドキュメント制作対象の js ファイル名
_out=$2  # ドキュメント出力先ディレクトリのパス

#ディレクトリの指定が無い場合はカレントディレクトリにドキュメントを作成
if [ -z "${_out}" ] ; then
        _out=./
fi


#メイン実行部
java -jar ${_jsdocDir}/jsrun.jar ${_jsdocDir}/app/run.js -a -t=${_jsdocDir}/templates/jsdoc -d=${_out} ${_file}

取り扱いは自己責任で〜