イナヅマTVログ

2012.02.14
22:15
author: taikiken
0件のコメント

WordPress Plugin, Shadowbox JSを3.0.3.9へ手動アップデート

WordPress Plugin の Shadowbox JS が中で使われているShadowbox.jsがGPLライセンスでないという理由でPluginディレクトリから削除されています。
Shadowbox JS removed from wordpress.org?

現行の3.0.3.8では close, next, previousの各ボタンが機能しないというバグがあります。
プラグイン・ディレクトリに無いので自動アップデートは使えなくなりました。

作者のMatt Martzさんがご自身のブログにアップデート版3.0.3.9を公開してくれています。
Shadowbox JS Plugin Pulled from the WordPress.org Repository

GPLを推進するWordPressとは思想が違うので、今回の事態はしょうがないかもです。
残念ですが、手動でアップデートしなくてはなりません。

また使用するためにShadowbox.jsのライセンスを購入しなければなりません。
FLVビデオ再生もするなら同梱されているJW Playerのライセンス購入も必要になります。

update 2012-04-25
Shadowbox JSが公式ディレクトリに戻ってきてますね。
ただし、外部ライブラリのShadowbox.jsのインストール先が変わっています。
本体に同梱できない(多分ライセンスの問題)せいでしょう。
手動でユーザーがアップロードしないといけません。

uploadsフォルダに”shadowbox-js”フォルダを作り、さらにそのフォルダ内に”src”フォルダを作成しShadowbox.js一式をアップロードします。

Shadowbox.jsのアップデートは自分でしなさいってことなんでしょう。

これがWordPressのGPL問題を避けられる苦肉の策って訳ですね。

Fancyboxも有料化されたし、Lightboxに始まるpop up系JSライブラリの有力どころはほぼコマーシャル・ライセンスを購入しないといけなくなりました。
まぁ作者も稼がないといけないし仕方ないですね。

2012.02.13
12:58
author: taikiken
2件のコメント

JavaScript, 名前空間の汚染問題を考える

togetter : JavaScriptの名前空間のスマートな使い方
ClockMakerさんのつぶやきから始まった、とても興味深いTLです。

JavaScriptの名前空間の汚染は神経質にならなくてはいけないポイントです。
言うまでも無いのですが、ゆるい言語なJavaScriptは型付ができないためにglobal領域に放り出された関数、変数をは容易に(思いもよらない)上書きが可能になります。
一人でコードを書いていれば注意さえすれば回避できる問題ですが、複数人がコード開発をしていたり、誰かが作成したコードを組み合わせて使わないといけないときにトラブルが起こりがちです。

jQueryとprototype.js の $() コンフリクトはよく知られてますよね。

■名前空間を汚染しない

global属性に何も存在させなければ、そもそも問題は発生しません。
一番の理想ですけど、JavaScriptファイルを複数に分けたり、公開ライブラリを作成することができなくなります。

□名前空間の汚染を最小にする

これは、JavaScriptを書くときに自分に課してる規約です。

名前空間の汚染は最小にする。
つまり1個にする。

上書きされないように、パッケージのような名前にする。
com.inazumatv.behavior.DoSomthing

私は大文字の名前にすることが多いです。
COMINAZUMATV
全部大文字で入力するのめんどくさいですよね、ドメイン入れてるし、これで他人と被ることはないかなぁと…

■グローバル空間にexport する関数

uupa さんがメンションされたこの「export する関数」を使う方法は知りませんでした。

ただ、まだこの関数を使うメリットが理解できません。
「export する関数」自体がglobalに存在しなければ使えないように思え、現時点では「名前空間の汚染を最小にする」ルールから外れているようにしか考えられないからです。
ルールって言ってもオレオレなので破ったとしてもたいしたことはないんですけど。

namespace-js も知らなかったライブラリでした。
https://github.com/tanabe/Advent-calendar-2011

これも、まだメリットが理解できないなぁ。

■長い名前だと使うの大変

JSで、もし jp.clockmaker.data.MojaData クラスを作った場合、いつも new jp.clockmaker.data.MojaData() って書くのでしょうか?場合によってはローカル変数に名前空間を入れればすみますが。

WebGLで一躍有名になったJavaScriptライブラリのThree.jsですが、大文字の名前空間に違和感が…。クラス呼び出すときに、 new THREE.Object3D() って見栄えはもちろんのこと、タイピングも面倒だし、書き忘れが多発しそうです。

私はローカル変数で対処してます。

;(function ($iz) {
	var behavior = $iz.behavior
	,do = behavior.DoSomthing
	;
})(COMINAZUMATV);

あ〜、こうやってローカルで展開するときにnamespace-jsが便利なのかも。
今度試してみよう。
そうすると「export する関数」もローカル領域で使える?いや、使えない!?
なんかわかんなくなってきた。

画期的な解決策が見つかると嬉しいです。

【追記】
名前空間を汚染させずにコードを記述するには即時関数の中にコードを閉じ込めるのが一つの解決策だろうと思います。
と言うか、今のところこれしか思いつきません。

;(function () {
	//ここにコード
}());

即時関数内のコードを他でも使いたい時は…

;
var example = (function () {
	//ここにコード
	function Example () {
 
	}
 
	return Example;
}());

こんな感じで取出して使っています。

2012.02.01
18:08
author: taikiken
0件のコメント

Sass+Compass+TextMate 2+SASS BundleでCSSコーディング

Sass
http://sass-lang.com/

Compass
http://compass-style.org/

Sass はコマンドラインCSSフレームワーク。
Compass はSassを便利にする機能満載。

どちらも ruby gem、それぞれのサイトに説明があるのでインストールは簡単。

コマンドを覚えなきゃなのはGUI人間には辛いとこ。
Compassの便利な機能も名称が長過ぎてeditorに入力するのがメンドイ。

Sass+Compassで充分便利だけどもっとラクしたい。

Compass.app
コマンドラインから解放してくれる Compass.app を購入した、$7.00。
http://compass.handlino.com/

TextMate 2+SASS Bundle
TextMate
1を購入して2へ無償アップグレードしましょう。
ユーロ安だし超お買い得。

sass-tmbundle

TextMate 2にSASS BundleをインスコするとCSSコーディングが異次元の便利さ。
zen-codingも便利だったけど勝負にもならない感じ。

■プロジェクト
コーディング・フォルダを作成
Compass.appを起動し新規プロジェクトを「上記フォルダ内」に作成

必要ならCompass.appの .rb ファイルを編集
CSSを書き出すフォルダ変更するために css_dir を書き換えてます。

sass フォルダの .scss を編集すれば .css を css_dir で指定したフォルダに書き出してくれる。

Compass には 960, blueprint などの CSS Framework も入ってて Grid な人にはたまらないでしょう。

update 2013-06-17
scss.tmbundle はTextMate 2から標準になってるようです。
環境設定からインストールできます。

githubでもソースが公開されています。
https://github.com/MarioRicalde/SCSS.tmbundle

2012.01.20
13:55
author: taikiken
0件のコメント

Bfxrにサウンド生成とエフェクトはおまかせ

アプリに効果的な効果音をつけたい時どうします?

音素材集から探して使うことが多いかなぁ。
毎回十数枚のDVD(!)の中を順番にあれでもないこれでもないとチェックして、一番良さそうなのをエキスポートしさらに編集ソフトでエフェクトかけて使ったりしてます。
一つ選ぶのに何時間もかかり、あげくに前使ったのと同じものを選んだり、なんてことも多かったりです。

効果音作成AIRアプリが公開されています。

Bxfr

Bxfr

Presetに多くの効果音が登録されているので、あとは好みでスライダーをごにょごにょしてExportするだけです。
音素材を読み込んであれこれするのも可能です。

Apache Licence 2.0のもとソースコードはgithubで公開してありました。
独自の機能拡張してみるのも可能ですね。

便利なツールを公開してくれて感謝です。

2012.01.19
16:00
author: taikiken
0件のコメント

【Memo】Flash Builderのフォント変更方法

すぐ忘れるので、メモ。

Flash Builderのエディタ・フォントとサイズを変更する方法。

Flash Builder > 環境設定
一般 > 外観
[右画面]
基本 > テキスト・フォント 【選択】> 「編集」ボタン

フォントとサイズを選択

「適用」ボタン
「OK」ボタン

階層深すぎ!

2012.01.10
12:36
author: taikiken
1件のコメント

AIRをデバッグするならFlashbugを削除しろ

AIR for iOS, AIR for Androidのテストを始めるとエラーが表示されてデバッグができなくなりました。
動作実績があるプロジェクトでもデバッグを開始するとエラーで止まってしまいます。

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.coursevector.flashbug::Profiler/allCompleteHandler()

なんだかよくわかりませんが、com.coursevector.flashbugが原因のようです。

Firefoxは今ではテスト用に使うだけですっかり日陰者扱いにしていたので、すねたのかもしれません。
そう言えば Flashbug アドオンをインストールしていたような…

久しぶりにFirefoxを起動しアドオンメニューからFlashbugを削除したところ、起動してくれました。
「無効化」ではエラーは消えませんでした。

AIRのデバッグでFirefoxも使っていないのにアドオンのFlashbugが原因でエラーになる理由は「?」ですが無事解決です。

Google先生に伺ったところAdobe Forumにもいくつかスレッドがありました。

Error when running a newly created mobile project
Error when launching Flex 4.5 mobile app.

Flashbug のコメントにも「AIRのテストできね〜」とありました。

Forumではmm.cfgの”PreloadSWF…”が書かれているラインを削除するといいよ、って書いてありましたが、mm.cfgは空だったので条件がちがっていたのかもです。

Flashbugはインスコしたものの一度も活躍することなく削除されました。

2011.12.28
18:17
author: taikiken
0件のコメント

inazumatv.com’s 2011

2011年は光のように去って行きまもなく2012年。
本年も多くの方に支えられ無事に過ぎてゆきそうです。

記録のために少しばかり2011年を振り返っておきます。

2011年3月を忘れることはないでしょう。
ささやかな募金を毎月日本赤十字社へおくっています。
もと通りになることはないのかもしれませんが、みんなが笑顔で暮らせる日が早く来ますように…

Flash Player 11 & AIR 3
Flash Player 11の登場でStage3D, StageText, StageVideoなどGPUを利用しパフォーマンスを上げることが可能になりました。
AIR 3でANEが利用できASだけでは対応できないこともネーティブコードで解決することが可能になりました。
おかげでAIR for iOS, AIR for Android, AIR for Blackberryでのアプリ開発が加速できそうです。

反面、AS以外の押さえておかないといけないこと(C, C++, Objective-C, Java…)が増えていき開発敷居がどんどん高く高くなっていってる気がしてしょうがありません。

あとGPU使用も対応・非対応ボードがあるようで選択がためらわれるケースがありそうです。
実際私のマシンではStage3Dを使用したサイトを見るとブラウザのコントロールが失われタブやウインドウを閉じることができず強制終了するしか手段がありません。

HTML 5
HTML 5があればFlashいらないぜ、なことも言われ始めました。
Video, Audio, Canvas…etcなどのHTML 5新機能を使ったらできると言っていると思うのですが、あまりにも無知な議論が多くてまともに聞く気にもなりません。

HTML 5は素晴らしい技術だと思います。
サイトを作るのに煩雑で複雑なXHTML, CSSルールを使用しなければいけないことから解放してくれる可能性があります。

ただ、RIAをFlashからHTML 5というのはあまりにも短絡過ぎるというかHTML 5の本質から離れすぎてるように思います。

2011年はHTML 5をネタに人前で話す機会が複数回ありました。
話すにあたりW3Cのドキュメントを読み直し自分なりに分析もしてみました。
個人的な感想ですが、HTML 5は文書構造とタグ構造をシンクロさせようぜ、ってところが一番でVideo, Audio, Canvas…etcはおまけに近い気がします。

ただそのおまけが、なかなか強力でタグだけで動画や音声が再生できるのは素晴らしいことです。
Canvasにいたっては3D表現も可能にしてくれます。

コントロールはJavaScriptを使わなければなりません。
情報が少ないなか開発は困難を極めそうです。

HTML 5の開発コストはFlashより高くなる
HTML 5だと開発コストが安くなる、などど訳知り顔の記事にもよく遭遇します。
無知をさらけ出してるとしか思えません。
いや、記事を書いてる人が正しくて私が無知の可能性が大いにあります。

Flashを使わずRIAにする技術根幹はJavaScriptです。HTML 5やCSS 3もありますが。
ブラウザごとに処理速度が違うアイツです。

HTML 5だから最新のブラウザだけ対応していれば良いなんて気前の良いクライアント様はどれぐらいいらっしゃるのでしょう。
IE 8以下も対応させようとすると『地獄へドライブ』が待っていそうです。

ブラウザ対応にどれほど時間をとられるのか考えたくもありません。

JavaScript
JavaScriptを使えば土台がHTML 5だろうがXHTML, HTML 4でもRIAみたいなことは可能です。

2011下半期は来る日も来る日もJavaScriptをガリゴリ書いていました。
Flashのように、表示させるDOM(パーツ)はアニメーションを伴わせ、ページ遷移はAJAXを使いページのリフレッシュはさせない、みたいなやつです。
URLはSWFAddressのように #! を使いディープリンクに対応させたりと、なかなか歯ごたえがありました。

どの案件も32bit PNGを使用しつつ IE 6にも対応させるなどかなりのハードルの高さです。

やっていて感じたのですが、IE 6, 7, 8のできの悪さは想定しているので不具合に出くわしてもあまりショックを感じないのですが、Firefox 7が思いの外ダメ坊主だったのはかなりこたえました。

Chromeが優秀過ぎるのでしょうか、あるいはFire Bugを入れているのが災いしているのかもです。

Webで JavaScript の重要度がますます上がっていくことだけは間違いないと思います。

案件全て jQuery を使用しました。
この便利なライブラリがなかったら、あの納期では完成できなかったでしょう。

【教訓】
jQuery は No Conflict Mode で使え!

もともと prototype.js をメインで使っていたので jQuery を使うときは習慣で No Conflict Mode で使います。
渡されるプロジェクトファイルにすでに多くのJavaScriptがインクルードされていて、$ がグローバル領域に書かれていたりするのはちょっと考えものです。
Name Spaceに注意を払わないとJavaScriptでの共同作業は不幸を招きかねません。

inazumatv.com
見たことあるって言われたるするとうれしいものです。
FITCでお目にかかった方に「あの記事」参考にしました、なんて言ってもらえて有頂天です。

昨年(2010)は SWF を JavaScript で解析しアニメーションさせる gordon の記事がアクセス最多でした。
今年もコンスタントにアクセスがあるようですが、gordon の開発は止まっているので他の技術を探る方が賢明です。

本年は My Avatar Editor の本家サイトがクローズしてしまいミラーリングしていたページへのアクセスが一時的に急増しました。
ミラーリングも切られてしまいもう使えなくなりました。

つぎに TextMate 2 登場時の記事に多くのアクセスがありました。

どれも自分発信でないところが、らしいと言えばらしいかな。

2011 Browser2011年のアクセス・ブラウザシェアは主要4ブラウザがほぼ均等になっていました。

世間一般とは大きく異なりますねぇ。

来年はChrome圧勝でしょうね、inazumatv.comでは。

2011 IEIEのシェアです。

IE 8が圧倒的に多いのですが、IE 9が増えてきています。
腐ったミルクIE 6がまだまだ使われているのは、多分企業ユーザーの方たちなのでしょう、しょうがないですかねぇ。

2012
ActionScriptメインの生活ができれば幸せです。

JavaScriptも相当おもしろいです。
もっともっと勉強したいと考えています。

Unity!
冬休み課題にしてます。
じっくりゴニョゴニョしてみるつもりです。

3D
3D表現は嫌いじゃないんですが、3Dモデルを動かしたりすることは関心がないのを言い訳にして勉強不足なところもありました。
ちょいと本腰入れたいと思っています。

ちょっと早いのですが、本年はありがとうございました。
来年もよろしくお願いいたします。