イナヅマTVログ

2010.08.15
13:11
author: taikiken
0件のコメント

as3corelibはgithubから

ActionScriptライブラリas3corelibがgithubへホストサーバーを変更していました。

as3corelibはcom.adobeなので安心して使えるライブラリのひとつです。
最近の流行なのでしょうか、Google Codeからgithubへサーバーを変えていました。

http://ja.wiki.github.com/mikechambers/as3corelib/

Google Codeでは今後メンテナンスが行われないとアナウンスされているので、ダウンロードリンクを早々に変更しておきましょう。

Introduction
The corelib project is an ActionScript 3 Library that contains a number of classes and utilities for working with ActionScript 3. These include classes for MD5 and SHA 1 hashing, JSON serialization as well as general String, Number and Date APIs.

Details
Functionality includes:

MD5 Hash
SHA1 Hash
JSON Library (serialization and de-serialization)
JPEG and PNG Encoding
HTTP Utility and Helper Classes
Array, String, Date, Number and XML Utility APIs
More…

MD5, SHAやJSONなど便利な機能があります。
パフォーマンスには問題があるかもですが、JPEG と PNG への BitmapData からの変換などうれしい機能もあります。

2010.08.03
13:33
author: taikiken
0件のコメント

Coda Notes, Safari Extention が便利です

Safari が 5.0.1 へアップグレードし Extention が使用できるようになりました。
Firefox のアドオンほどではないですけど多くの Extention が Apple のサイトに用意されています。

Apple.com : Safari Extensions Gallery

気になるサイトにメモやらマークが可能な Coda Notes がすこぶる便利です。

http://extensions.apple.com/#developer

Coda Notes - Yahoo

ゴニョゴニョ落書きしたら自分のメールアドレスへデータを送信できます。
メールに添付されるデータはJPEGです。

デザインチェックなんかにも使えるのかも。。。

Coda Notes は CodaTransmitPanic.com 社謹製。

ツールバーにできる [Add Coda Notes] ボタンをクリックするとCoda Notes バーが表示されます。
ペンやマーカーはアイコンをクリックすると色を切り替えられます。
Flash上でも問題なくマークが可能でした。

Coda Notes - Adobe

2010.07.25
14:28
author: taikiken
0件のコメント

Graphic Parts, Web Design や アプリケーション・デザインに便利

zeldman さんのブログ紹介されていた、Vincent さんの Illustrator パーツが良くできていて便利な件。
UI DESIGN FRAMEWORK FOR WEB DESIGNERS

webalys.com : A free User Interface Design tool for Web Designers

A free User Interface Design tool for Web Designers

• Design faster wireframes and create better mockup deliverables in Illustrator.
• Design usable application interface with hundreds of common GUI elements : just drop them from Illustrator Panels or pick them in the library files.
• Customize easily the vectors GUI elements to your own needs : you can easily resize, color or tweak their appearance.
• Benefit from a consistent UI elements library made by a web designer expert in application interface design.

ダウンロードリンクから入手できます。

使用時にはサイトへのリンクを付けてくれとのことです。
ワイヤーフレーム、モックアップでの使用は表記をしなくてよいそうです。

UIデザインで重宝しそうです。

2010.07.20
15:02
author: taikiken
0件のコメント

詳細!Progression 4 Flashフレームワーク入門ノート

Twitterで応募して献本いただきました

@oshige さんの「2名限定献本希望者募集」への応募が叶い献本を送っていただきました。

我が家の本棚には Director な本を含め多くの大重さん著書・共著の本がたくさん並んでいます。
最新刊の「詳細!Progression 4 Flashフレームワーク入門ノート」をこのような形で手元に置くことができることを大変嬉しく思います。

あらためて、ありがとうございました。

□ はじめに

本が届いてから、仕事の合間にいっきに読み進めました。
実質12時間もかかっていないので、本文は読みましたがコードはかなり読み飛ばしています。
いっきに読んで気になるところにポスト・イットを貼ってあとで読み直すのがいつもの読書スタイルです。

私自身はまだ Progression でプロジェクトを書出してシーン移動などの機能を堪能したことはありません。
Progression のコマンドを使った、部分的な使用をしているだけです。
まだ私にとって未知な存在の Progression に何もかもを委ねてしまうのが恐いのが一番の理由です。
ですが、コマンドを使った便利さから「クラススタイル」を取入れた開発をやってみたいと思っているところです。

Progression 4 Flashフレームワーク入門ノート、超斜め読み

大重さんらしい無駄のない文章はこの本の魅力のひとつです。
勝手な想像ですが、あれもこれも説明したいところを絞って要点を的確に伝えることを念頭において書かれているようです。
このような技術(プログラム、スクリプト、コード)解説書の中には時に、あれもこれも説明しようとして結局なにを説明しようとしてるのかが分からなくてイライラさせられることも多いのですが、そのようなことがありません。
技術が高く、分かりやすく説明されている稀有な本です。

実案件での使用を想定し何度もテストしたと思えるコードからは、大重さんがProgressionを理解するためにたどった道が見えてくるようです。

掲載されているコード例それぞれからは贅肉が削ぎ落とされています、このように簡潔にまとめる上げるのには大変苦労されたのではないかと思います。
また、大変オーソドックスな記述になっているので分かりやすく読みやすくなっています。
おかげですぐにも現場で使えるのではないかと感じました。

コンポーネントスタイル、タイムラインスタイルの説明もありますがクラススタイルの解説に本書の大半がさかれています。

とは言え、コンポーネントスタイル・タイムラインスタイルでの開発をする方にとっても参考になるでしょう。

ActionscriptClass を作れるスキルがあると楽しく読み進めることができると思います。

□ コマンドは宝の山

使ったことのあるProgressionのコマンド(4章, 6章)の説明は特に興味深く読みました。
知ってたつもりでいただけだったんだと思い知らされ、表面的なところで使ってたんだなぁーと気が付きました。
そんないいかげんな使い方でもどうにかなっちゃうのがProgressionの懐の深さなんだと、変に感心してしまいました。

あの時、この本があったら悩まずにすんだのに…

本書が「楽しいこと」だけやるために、Progressionが持っている力を最大限に引き出すために、多くの手助けをしてくれるではないかと思うと、ワクワクしてきます。

□ 電子書籍が欲しい

できれば電子書籍化して欲しいと思いました。
O’REILLY の Print+Ebook のように両方出してもらえるのが希望です。
紙の書籍のほうが良いことは間違いないのですが、持ち歩くことを考えるとiPhone, iPadにも入れて持ち歩ける電子書籍が欲しいと思います。

明らかに編集が間違ってるでしょ、なところがありました。
電子化したほうが訂正も簡単ではないかと思います・・・

*正誤表はこちら
http://oshige.com/flash/progression/

□ ProgressionによるFlashコンテンツ開発ガイドブックと2冊が正解

私もそうなのですが発売が「ProgressionによるFlashコンテンツ開発ガイドブック」が先だったので、すでに1冊持ってるけど、どうしようとお考えの方もいるかも知れません。

同じネタもあるのですがコード例が違うのでどちらも参考になります。

こんな方法とかあんな方法とかがあるんだとわかったりもします。

大重さんの本はお一人で書かれている一貫性がありますしユーザー視点の解説です、こちらは開発サイドに近い視点の解説になっているように感じました。

どちらも手元に置いておくと吉、ではないかと思います。

□ さいごに

ブックレビューをちゃんと書くのは初めてで、何度読み返してもおかしい気がするのですが、ついに諦めて公開することにしました。

献本していただいたからというわけではなく「詳細!Progression 4 Flashフレームワーク入門ノート」がほんとに良い本だったのでなんとかそのことが伝わるようにと願っています。

Progression 自体、大変素晴らしいプロジェクトです。
Flashの未来を支える技術のひとつだと思います。
Flashを愛する人に広く使われて、ステキなコンテンツがたくさん登場するといいな。

2010.07.16
15:06
author: taikiken
0件のコメント

iPhoneアプリ企画書作成に役立つグラフィックパーツ Ver.4 + iPadもね

以前の投稿「iPhoneアプリ企画書作成に役立つグラフィックパーツ」のteehanlax.comで新しいファイルが配布されています。

iPhone, iPad 企画作成やデザイン制作に役立つPSDファイルがダウンロードできます。
iPhone版は Ver.4 へアップグレード。
iPad版もダウンロードできます。

iPhone GUI PSD Version 4
iPad GUI PSD

iPhone PSD

iPad PSD

2010.07.15
15:00
author: taikiken
0件のコメント

Text Layout Framework 2.0はsourceforgeから

Adobe Text Layout Framework Team blog
TLF Now on SourceForge

Text Layout Framework 2.0をsourceforgeにリリースしたよ、な記事。
現在のバージョンは1.1、Flash CS4, Flash CS5, Flex Builder 3, Flash Builder 4 で使用可能です。
Flash CS4, Flex Builder 3はText Layout FrameworkからtextLayout.swcをプロジェクトにセットアップして使用します。
Flash CS5, Flash Builder 4 にははじめから同梱されています。

Text Layout Framewor は縦書きができたり文字表現の幅が広がる素晴らしい試みです。

長くベータ・テストが続いていましたが Flash Builder 4 と共に正式に登場しました。

もう次のバージョンの開発が始まってるんだ。
ダウンロードしてみたけどソースは Actionscript だった。C とかじゃないんだ。

パフォーマンスは期待うすなのかなぁ。

sourceforge : Text Layout Framework
ダウンロードはSVNで。

【おまけ】
gskinner先生も Adobe Text Layout Framework Team のブログにあわせたようにTLFについてポストしてました。
Some Thoughts on TLF & FTE
う〜む、いいことばかりじゃないってことだね。

【おまけ】2
Flashデベロッパーセンターの野中先生の記事にTLFの解説がありました。
ActionScript 3.0でFlash Professional CS5のText Layout Frameworkを使う

TLFライブラリについても書かれていました。
Flash CS5のヘルプにあるんですね。

Text Layout Frameworkというのは、「ActionScript 3.0 で記述された独立したコンポーネントライブラリです」(「新しい Text Layout Framework の特徴」)[*1]。

[*1]「Text Layout Framework は Flash Player に組み込まれていません。これはすべて ActionScript 3.0 で記述された独立したコンポーネントライブラリです」(前出「新しい Text Layout Framework の特徴」)。そのため、書出されたSWFファイルは、Flash Player 10 (Flash CS4 Professional対応)でも基本的に動きます。

2010.07.09
11:48
author: taikiken
0件のコメント

HTML5 framework, メモ Sencha とか SproutCore

WordPress 3.0 の標準テンプレート twentyten が HTML5 ベースになりました。

iPhone, iPad の Apple はご存知の通り HTML5 を強力にプッシュしています。

Apple – HTML5

US Youtube もモバイル版(iPhone, iPad)用に HTML5 サイトを昨日オープンしました。
Youtube HTML5
*iPhone, iPad でサイトの言語設定を英語にして Youtube にアクセスすると確認できます。
http://m.youtube.com/

Safari のユーザーエージェントを Mobile Safari – iPhone 3.1.3 でも見れます。


HTML5 への対応は急務ではないにしても準備が必要だと思わずにはいられません。
すでに多くの HTML5 プロジェクトが存在しているようです。

気になるいくつかをピックアップしメモしておきます。

Sencha – Introducing Sencha Touch – HTML5 Mobile App Framework
Ext JS が Sencha へ名前を変えモバイル用 HTML5 フレームワークへ特化したようです。
モバイルなので Android も含めるのでしょうが、現時点では iPad, iPhone 向けと言ってもいいでしょう。

Objective-C UIKit / UIView の見た目と動き(アニメーション・トランザクション)を忠実に再現しようとしています。

デモファイルのできは驚きです。
まさに PC Safari の画面が動きも含めて iPad と同じように見えます。
*オンラインのデモを見る場合は Safari の開発メニューを表示させユーザーエージェントを Mobile Safari 3.2 – iPad にすることで確認できます。

ライセンスがどうなるかのインフォメーションがベータ版の現時点でははっきり書かれていないので、ちょい気になります。

SproutCore
html5 sproutcoreiWork.com 作成, MobileMe リニューアルに使われたフレームワークらしいです。
Projects Using SproutCore

サンプルファイルのソースに Apple のコピーライトが入ってるのがあったりするのはそのせいなのかなぁ。
Apple が深くコミットしてるのでしょうか?

あっ、licence.js に 書いてあった。

SproutCore — JavaScript Application Framework
copyright 2006-2009, Sprout Systems Inc., Apple Inc. and contributors.

ソースは github.com にホストされています。

http://github.com/sproutit/sproutcore

SproutCore フレームワークを使ったりサンプルをローカルで確認するにはターミナルを使います。

Get Startedに書いてあるようにまず最初に sproutcore インストールします。

Ruby gem になっている sproutcore をターミナルからインストールします。
コードは書かれているとおりなので難しくはないと思います。

sudo gem install sproutcore

後はお決まりの「HelloWorld」アプリを作ります。

cd PROJECT_DIRECTORY
sc-init HelloWorld

アプリにアクセスするには sc-server を立ち上げブラウザにURLを入力することになります。

cd hello_world
sc-server

http://localhost:4020/hello_world or http://0.0.0.0:4020/hello_world

Demos の Sample を github からダウンロードして確認してるけど、いくつかのサンプルはエラーが出てブランク画面だけしか出てこずに確認できません。

開発用エディタは TextMate + SproutCore.tmbundle が好きだってサイトに書いてあった。

update 2010-07-12
どちらも Web に Desktop と同じようなリッチな UI を備えたアプリを作ろうぜ!、な目的があるようです。
となるとアイコンも含めたグラフィック品質が強く求められます。
既存のWebに求められてないと言うつもりも無いし、手を抜いて作られていると言うつもりはありません…
ただ比べられる対象の開発コストより遥かに少ない予算で作成されることが多いことを考えると、これらのフレームワークに頼ることも仕方が無いことなのかもしれません。

なんだか大変な時代がやってこようとしてる??

update 2010-08-05
Sencha Touchノート を@oshige さんが始めています。
そのうち書籍が出るのでしょうか?楽しみです。

2010.07.06
22:23
author: taikiken
4件のコメント

ActionScript 3, ArrayとObjectのクローン(複製・コピー・copy)を作る

Array型とObject型変数は別の変数に=演算子を使っても、置き換わる(代入)のでは無く参照(リファレンス)を渡してるだけです。
ActionScriptに限った話では無くどの言語にも共通の振る舞いです。
て、分かっていても時々やらかしちゃう。

気を引き締めないとってハマるたびに思うんだけどなぁ・・・

var lists:Array = [10,20,30,40];
trace("lists", lists);
// lists 10,20,30,40
var copied:Array = lists;
copied[0] = "change";
trace("lists", lists);
// lists change,20,30,40

配列を複製(クローン、コピー)は Array.concat を使うと可能です。

var lists:Array = [10,20,30,40];
trace("lists", lists);
// lists 10,20,30,40
var cloned:Array = lists.concat();
cloned[0] = "modify";
trace("modify", cloned);
// modify modify,20,30,40
trace("lists", lists);
// lists 10,20,30,40

concatがないObject型の複製(クローン、コピー)は他の方法を考えないといけません。
for inを使ってグルグルぶん回すって方法はありますけど、ちょっと面倒くさい。
一次元ならまだしも二次元になってたり、一次元でも要素が配列だったりすると、って考えるとかなり面倒になりそうです。

Adobeのサイトに解決方法がありました。
そのものズバリ Cloning arrays
http://livedocs.adobe.com/flex/3/html/help.html?content=10_Lists_of_data_6.html
日本語
http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7ee7.html

import flash.utils.ByteArray;
 
function clone(source:Object):*
{
    var myBA:ByteArray = new ByteArray();
    myBA.writeObject(source);
    myBA.position = 0;
    return(myBA.readObject());
}

この関数を使うとArrayもObjectも複製可能です。

// Array
var lists:Array = [10,20,30,40];
var listsClone = clone(lists);
listsClone[0] = "change";
trace("listsClone", listsClone);
// listsClone change,20,30,40
trace("lists", lists);
// lists 10,20,30,40

Object型も…

var objects = {apple:10, orange:20, banana:30, melon:40};
var objectsClone:Object = clone(objects);
objectsClone.apple = 1010;
// apple:1010, orange:20, banana:30, melon:40};
// objects
// {apple:10, orange:20, banana:30, melon:40};

Flex 3 のヘルプなので、ずいぶん前の情報だったことにまず驚いた。
ByteArray って色んなことができるんだなぁ。

ByteArray.writeObject
// バイト配列に AMF 直列化形式でオブジェクトを書き込みます。
ByteArray.readObject
// バイト配列から AMF 直列化形式でエンコードされたオブジェクトを読み取ります。

ByteArray.writeObjectで AMF 化して ファイルポインターを先頭に戻して ByteArray.readObject で取出すんですね。

わかったことにしておこう。

HELPはちゃんと見ないといけない、とまた肝に銘じた。

多次元配列もコピーできる!
エライぞ!

update
@beinteractiveさんのブログでご自身のBEFoundationライブラリの解説が行われています。
ArtisticCoding: オブジェクトの基本操作の実現、で複製・コピーの話があったのでリンクしておきます。

比較 – 二つのオブジェクトが等価か比較する
複製 – あるオブジェクトと等価な新しいオブジェクトを作成する
コピー – あるオブジェクトと等価になるように値を設定する

まだ使ったことはないのですが、とても魅力的なライブラリのようです。

2010.06.22
14:39
author: taikiken
5件のコメント

モバイルSafari(Webkit)のCSS:overflow

iPhone / iPad 搭載のSafariは当然ながらモバイル用です。
パソコン版Safariとはほぼ同じ仕様だと思いますがスクロールバーの表示が決定的に違います。
パソコン版Safariは他のブラウザと同じように表示領域を削りスクロールバーを表示させます。
モバイル版Safariではスクロールは「スワイプ」をすることで実現します。
スクロールバーは操作しなくとも良いようになっています。
おかげで小さな画面上にもかかわらず直感的に操作できることでストレスを感じることがありません。
使われているエンジンはWebkitです。
このWebkitはePub形式の電子書籍表示にも使われています。

overflow:auto できないモバイルSafari

前置きが長くなってしまいました。

優れたモバイルSafari(Webkit)ですが、いまだに解決(?)できない問題があります。
解決しようとしているのかも疑問ですが・・・

overflow:auto;
/* or */
overflow:scroll;

CSSで上記のように指定されている部分が全て overflow:hidden 扱いになってしまい表示されません。
CSSで上記のように指定されている場合、コンテナからはみ出してしまいスクロールバーが表示して欲しい箇所にスクロールバーが表示されず、overflow:hiddenと同じ状態になってしまいます。
スクロールバーがないので対応していないと想像されます。
当然と言えば当然の結果なのかもしれません。

そのためにコードレビューのようなサイト・書籍の場合、肝心な部分が全く分からないことが良くあります。
これはどうにかして欲しいなぁー。

物理的なスクロールバーが無い以上どうしようもないのかもしれません。

制作側が overflow:auto; などを使わず伸びたり縮んだりするボックスを実装しなければいけないのかもしれません。
width, height のどちらかを指定しないなどの対処が必要かもです。

iPhone / iPad が今後ますます普及していくと、Flashに対応していないこと以外にもこの問題も考慮して制作することが要求されるのかもしれません。

当サイトの表示例です。

見事にコードが切れちゃってます。

overflow:auto; とは関係ないですが、Scribd、Flashを捨てユーザー滞留時間が3倍増なんて記事を読むとなんか色々考えさせられます。

PCブラウザ互換だけでなく iPhone / iPad 最適化も全てのコンテンツとは言いませんが、今後重要な要件になってくるのかもしれません。
Scribd in HTML5
FlashからHTML5へ – ドキュメント共有のScribdが大移動開始

update 2011-09-20
コメントで教えてもらいました。
指二本で縦にスクロールできます。
横はダメっぽい。
エリアが狭いと縦にもうまくスクロールできないときがある。
そもそもスクロール可能かどうかのインフォメーションが何もないのでUIとしては最低。
というわけで、やっぱりイケてなかった。
iOS 5まで待たないと。