Archive

For 4月, 2011

名古屋ひよこの会第1回勉強会 に行ってきた

No Comments

名古屋ひよこの会に行ってきました。

前回のミーティングの時の様子はこっち 名古屋ひよこの会に行ってきた

ほかの人のレポートはこっち にゃあプロジェクト – ウェブログ – 名古屋ひよこの会 (第1回勉強会) レポート

第一回目の勉強会のテーマは、「Eventは友達!

中村さんのお話

内容は後日資料をアップされるそうなので、そちらを見てくださいw
アップされたらここにも追記します。

本来のひよこの会はハンズオン形式で、誰か一人が講義するというものではないのですが、
第1回ということもあって、特別に講義していただきました。

中村さんのお話の中にもありましたが、ひよこの会の目的は「今さら人に聞けないことを聞く」というものですが、初心者は何を聞いたら良いかわからない、どう聞いたらいいかわからない という人が多いと思います。
そういう方にとっては、最初に中村さんにお話していただいてすごく参考になったのではないかと思います。

Eventは友達!

addEventListenerとdispatchEventについては中村さんの資料を見ていただくとして、ここではどうせなら違うことを書いてみようと思います。

AS3のように、addEventListenerでイベント待機して、dispatchEventでイベント発行して、という書き方をイベント駆動型プログラミングといいます。(イベント駆動型プログラミング – Wikipedia)
イベント駆動型はGUIプログラミングと相性が良く、Flashではイベント駆動でのプログラミングが前提となっています。
とまぁここらへんは知らなくても生きていけるのでどうでもいいですw

中村さんのお話では、独自のイベントを書いてdispatchEventしてましたが、初心者は既存のイベントをaddEevntListenerする機会の方が多いと思います。
そこでaddEventListenerするときの注意・小技をちょっとだけ紹介します

addEventListenerしたらremoveEventListenerもしてね

よくmcをaddChildしてremoveChildしても、イベントはaddEventListenerしたまま、ということがあります。
イベントはremoveChildしても消えません。
画面には写ってなくても裏でいっぱい動いてます。
気分的にも負荷的にもよろしくないので、後片付けはちゃんとしましょう!
というお話

removeEventListenerめんどいから勝手に消えて

イベント勝手に消えていいよ、ってとき

public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, 
priority:int=0, useWeakReference:Boolean=false):void

addEventListenerの第五引数のuseWeakReferenceをtrueにするといつか勝手に消えてくれます。

無名関数をaddEventListenerに登録する方法

普通関数には名前がありますが、名前のない関数を作って、addEventLisnterすることもできます。

addEventListener(Event.ENTER_FRAME, function(e:Event):void {
	trace("hoge");
});

あんまりよろしい書き方じゃないけど、テストなんかでちゃちゃっと書きたい場合に便利!

無名関数でaddEventLisnterに登録したけど、removeEventListenerしたい

基本的に、無名関数で登録すると、削除できません。
だけど、ちょっとしたテクで、無名関数の中でならremoveEventListenerすることができます。

mc.addEventListener(Event.ENTER_FRAME, function(e:Event):void {
	trace("hoge");
	e.currentTarget.removeEventListener(e.type, arguments.callee);
})

これでremoveEventListenerできます。魔法と思っといていいですw
なにしてるかというと、
e.currentTargetは、addEventListenerしたmcを指します。
e.typeは、イベントのタイプ、上の例ではEvent.ENTER_FRAMEです。
arguments.calleeは、現在実行している関数の参照です。つまり今いる関数自身。
こいつらを使うと、自分自身をremoveEventListenerすることができます。難しいですねw

addEventListenerに引数付きの関数を渡したい

addEventListenerで登録するとき、関数に一緒に引数もつけて登録したいとき。

function func(moja:String):Function {
	return function(e:Event):void {
		trace(moja);
	};
}

addEventListener(Event.ENTER_FRAME, func("てすと"));

クロージャを使って引数を保持させ、引数付きの関数を登録できるようにしています。

 

適当にあげてみましたが、ひよこの会の人達がどのくらいのレベルなのかわからないので、難しいものも入ってます。
わからなくても大丈夫です、俺も全然分かりませんでしたw
全部わかるようになれば、立派なEvent使い!

質問タイム

中村さんのお話が終わったら質問タイムに突入。
最初の方はみなさん全然手があがらなかったのですが、後半になるとどんどん質問があがってきていい感じでした。
どんな質問があったかは覚えてな(ry

せっかくなので、覚えてる範囲で、自分なりの考えで答えていきます。

なんでボタンじゃなくてムービークリップ使うの?

中村さんのお話で、ボタン使わずにムービークリップで作れって話があったので、それに対する質問。

実際にボタンを作ってみるとわかるんですが、マウスオーバーやマウスダウンなどの状態毎に別々の絵をつけていく感じでとても作り易いんですけど、ボタン内のフレームにはas書けないんですよね。
慣れてきてあーしたいこーしたいって思ったときに融通がきかない。
じゃあ始めからムービークリップで作っとけよと。

ライブラリってなに?

ライブラリとは、よく使うようなプログラムをどこでも使えるように、エロイエライ人がまとめてくれたものです。
有名所では
簡単にasでアニメーションさせることができるTweener
簡単にフルFlashサイトが作れてしまうProgression
Adobeの中の人が作ってる、便利な機能がいっぱい入ってるas3corelib
などなど、あげると切りがないのでここらへんで。
日本にはAS3のライブラリをいっぱいまとめて置いてるSpark Projectという素晴らしいコミュニティサイトがあるので、活用したらいいよ!

プリローダーってどうすんの?

まずプリローダーって?
・画像とか読み込みが全部終わる前に再生しちゃうとおかしくなる
・swf自体のサイズが大きいと、完全に読み込まれるまで真っ白のままで表示されないからどうにかしたい
以上の2つの問題を解決するために、予め読み込んで、その間はなんかアニメーション表示させとこうってのがプリローダーです。
よく重たいFlash見るときに最初にローディングバーがあったり、くるくるしてるのがあったり、あれです。

前者の
・画像とか読み込みが全部終わる前に再生しちゃうとおかしくなる
ってのを解決するためには、一番最初に、URLLoaderとかでいっぱい読み込ませて、終わったら進むようにすればおkです。

・swf自体のサイズが大きいと、完全に読み込まれるまで真っ白のままで表示されないからどうにかしたい
ってのを解決するためには、swfを読み込むswfを用意します。
FlashDevelopを使うとテンプレが用意されてます。
Progressionもプリローダーが用意されてます。便利ですね。

外部ファイルを読み込みまくってるときは前者、swfに埋め込みまくってる時は後者を使うと良いです。

外部AS?

ってなんぞや?
asはタイムラインに書くことも、.asファイルとして外部にまとめて書くこともできます。
主にタイムラインメインで作ることをタイムラインベース、asファイルで作ることをクラスベースといいます。
大規模で動的なFlashを作るときはクラスベースじゃないときついと思います(多分)
タイムラインにいっぱいas書くと、どこに何書いてあるか全然わからなくなります。しんどい。

コンポーネントって?

ボタンとかチェックボックスとかカラーピッカーとか、Adobeが始めから準備してくれている便利な部品たちのことです。
こんなの

This movie requires Flash Player 9.0.0

これを使うと、適当に作ってもそれっぽく見えます←
でも分かる人にはAdobeのそのまま使ってるってバレバレなのでちょっとダサいです。
コンポーネントを自作することもできます。

ステージ外が見えちゃう

swfをそのまま開いたりするとよくステージ外が見えちゃったりします。
そういうの防ぐにはどうすればいいの?

一番ラクチンなのは、ステージのサイズでマスクをかけてやること。
これだけで領域外は見えなくなります。
他には領域外に行くとアルファを0にしたり。でもちゃんとremoveChildしてやるのが一番いいです。
ステージのサイズでマスクをかけて、領域外にでるとremoveChildするっていうのが一番確実だと思います。

スマートフォンに対応させるには?

・Androidの場合

AndroidはFlashが見れるので、そのままでも見れることには見れるのですが、重いです。
しっかりとしたAndroid対応のFlashを作るには、Flex SDK “Hero” のモバイル用フレームワークを使うと、モバイル用に最適化されたインターフェースを作ることができます。
(参考:Flex SDK 4.5 “Hero”を使って、お手軽Androidアプリ開発 | ClockMaker Blog)

また、AIR for Android を使ってAndroidアプリとして出すこともできます。
こちらはAIRなので、Flashよりも高速で、ローカルな機能を使うことができます。
(参考:Flash Professional CS5でAIR for Androidをはじめよう | デベロッパーセンター)

・iPhoneの場合

iPhoneはFlashは見れません。Flashを見ることができるアプリも出てますが、正直見れたものじゃないです。
しかし、FlashをiPhoneアプリに変換できるツール、Package for iPhoneがAdobeから出ています。
iPhoneの規約変更でおじゃんになりかけたけど、また復活したw
(参考:今すぐ出来るPackager for iPhone | エントリー | _level0.KAYAC | flash ActionScript blog)

どっから始めたらいいの?

どこから始めたらいいのかわからない、なにすればいいのかわからない、ってのは最初の頃はよくあると思います。

とりあえずAS3の基本的な型と文法だけわかるようになっとけばいいと思います。
文法くらいまでは、大体AS3の入門書を見ればどれも簡単に説明されてると思います。
あとは、何か作るものを決めて、それを作るためには何をすればいいかを考えて、ググる作業ですw
クラスの設計の仕方わかんねえ・・・とか思ったら、オブジェクト指向 とか デザインパターン とかでググればいいです。
わからなかったらひよこの会で聞くと誰か答えてくれます(多分)

Flashを勉強する上で便利なサイト

質問にはなかったのですが、調べ物したり勉強するのに便利なサイトをいくつか。

  • Adobe® Flash® Platform 用 ActionScript® 3.0 リファレンスガイド
    AS3使う限り見続けるであろう、AS3の説明書

  • アドビ-Flashデベロッパーセンター
    解説記事やチュートリアルが豊富

  • Flashゲームプログラミング講座 For ActionScript3.0
    ひとつひとつサンプル付きですごくよくまとめられてるHakuhinさんのサイト

  • FLASH-JP.COM – FLASH-japan FORUM
    日本最大級のFlashユーザーのためのコミュニティサイト
    ※質問を投稿する際には、必ず似たような質問が既にないか調べて、マナーを守って投稿してください。

  • にゃあプロジェクト – ウェブログ – 関連記事 : AS3.0 (まとめ)
    たくさんのFlash関連記事をサンプルと一緒に解説しているサイト。

  • wonderfl build flash online
    素晴らしいFlashが全てソースコード付きで見られる
    自分で作ったFlashを投稿することもできます。
    (tonというユーザー名で投稿してるのでよかったら見てくださいw)

  • Beautifl – Flash Gallery of wonderfl
    上記のwonderflの作品の中から美しい作品だけを集めたサイト。

    感想

    第1回目ということもあってどうなるか心配でしたが、後半はだいぶ質問も手が上がるようになって、ひよこの会らしくなってよかったと思います。
    なにより女性率が多くてよかったです!(ぇ
    ずっと一人で仕切っていただいた中村さんありがとうございました。
    中村さんのお話は、初心者を意識して分かりやすく解説していただいて、とても参考になりました。

    懇親会もみなさんと名刺交換できたり、わいわいがやがや楽しかったです。
    トライデントの可愛い女の子もいたしね!w

    次回のひよこの会はいつあるかわかりませんが、楽しみにしてます!

  • Ubuntu10.10 – Java, Flex4 SDK インストール –

    No Comments

    UbuntuにJavaとFlex4SDKをインストールする

    Javaのインストール

    インストール

    SunのJDKをインストールしたい
    デフォだとリストにないので、追加する

    sudo vim /etc/apt/sources.list
    

    として

    ## Uncomment the following two lines to add software from Canonical's
    ## 'partner' repository.
    ## This software is not part of Ubuntu, but is offered by Canonical and the
    ## respective vendors as a service to Ubuntu users.
    # deb http://archive.canonical.com/ubuntu maverick partner
    # deb-src http://archive.canonical.com/ubuntu maverick partner
    

    # deb http://archive.canonical.com/ubuntu maverick partner
    # deb-src http://archive.canonical.com/ubuntu maverick partner
    

    この二つのコメントアウトを外す

    一回updateして

    sudo apt-get update
    

    インストール

    sudo apt-get install sun-java6-jdk
    

    確認

    試しに実行してみる

    適当なとこでMain.javaを作る

    public class Main{
            public static void main(String args[]){
                    System.out.println("hoge");
            }
    
    }
    

    Main.java

    書いたら、コンパイル

    javac Main.java
    

    Main.classができたら、実行

    java Main
    
    hoge
    

    と出たらおk

    Flex4 SDKのインストール

    (参考:How to install and set up Adobe Flex SDK on Ubuntu linux « SteveLove.org)
    how to に忠実にやってみます

    インストール

    ここらへんからzipを落としてくる
    Download Flex 4 – Flex SDK – Adobe Open Source
    Flex用のディレクトリを用意する

    sudo mkdir /opt/flex
    

    解凍

    unzip flex_sdk_4.zip -d tempflex
    

    解凍したものをさっき作ったディレクトリに移動する

    sudo mv tempflex/* /opt/flex/
    

    移動して確認

    cd /opt/flex
    ls
    

    ちゃんとできてたら、次はパスを通す

    vim ~/.bashrc
    

    一番下に、以下を追加して保存

    export PATH=/opt/flex/bin:$PATH
    

    一回ターミナルを終了して、もっかい入りなおしてからパス通ってるか確認

    mxmlc -help
    

    こんなん出てきたらおk

    Adobe Flex Compiler (mxmlc)
    Version 4.1.0 build 16076
    Copyright (c) 2004-2009 Adobe Systems, Inc. All rights reserved.
    ...
    ...
    

    確認

    試しに実行してみる
    Main.asを書く

    package {
    
    	import flash.display.Sprite;
    
    	public class Main extends Sprite {
    
    		public function Main():void {
    			graphics.beginFill(0xff0000);
    			graphics.drawCircle(100, 100, 100);
    			graphics.endFill();
    		}	
    	}	
    }
    

    コンパイル

    mxmlc Main.as
    

    Main.swfができてるはず
    ウェブサーバー立ててたらこれを公開ディレクトリに置いたりしてブラウザから見れたらおk

    Ubuntu10.10でストリーミングサーバー -gnump3d-

    No Comments

    せっかく自宅鯖立てたし、どこからでも鯖にある音楽を聴けるようにする

    入れるのはgnump3d

    公式サイトから落としてきて解凍
    パスワード認証したい人は、3.0からできなくなってるので2.9.9.9を落とす

    wget http://savannah.gnu.org/download/gnump3d/gnump3d-3.0.tar.gz
    tar zxvf gnump3d-3.0.tar.gz
    cd gnump3d-3.0
    sudo make install
    

    でインストール

    そのままインストールしたら文字化けしちゃったので、文字化け対策
    (参考:[linux] ストリーミングサーバーいろいろ « 雑記帳)

    Jcode.pmがない人は先にインストール

    sudo perl -MCPAN -e shell
    cpan[1]> install Jcode
    

    /usr/share/perl5/gnump3d/readtags.pmを編集

    sudo vim /usr/share/perl5/gnump3d/readtags.pm
    

    use strict;と書いてある下にuse Jcode; を追加

        $TAGS{'ARTIST'} = $tag->{ARTIST}   || "";
        $TAGS{'TITLE'}  = $tag->{TITLE}    || "";
        $TAGS{'ALBUM'}  = $tag->{ALBUM}    || "";
        $TAGS{'YEAR'}   = $tag->{YEAR}     || "";
        $TAGS{'COMMENT'}= $tag->{COMMENT}  || "";
        $TAGS{'TRACK'}  = $tag->{TRACKNUM} || "";
        $TAGS{'GENRE'}  = $tag->{GENRE}    || "";
    

    と書いてあるところを消して以下を追加

        $TAGS{'ARTIST'} = Jcode::convert($tag->{ARTIST}, 'utf8', &Jcode::getcode($tag->{ARTIST}), "z")   || "";
        $TAGS{'TITLE'}  = Jcode::convert($tag->{TITLE}, 'utf8', &Jcode::getcode($tag->{TITLE}), "z")    || "";
        $TAGS{'ALBUM'}  = Jcode::convert($tag->{ALBUM}, 'utf8', &Jcode::getcode($tag->{ALBUM}), "z")    || "";
        $TAGS{'YEAR'}   = Jcode::convert($tag->{YEAR}, 'utf8', &Jcode::getcode($tag->{YEAR}), "z")     || "";
        $TAGS{'COMMENT'}= Jcode::convert($tag->{COMMENT}, 'utf8', &Jcode::getcode($tag->{COMMENT}), "z")  || "";
        $TAGS{'TRACK'}  = Jcode::convert($tag->{TRACKNUM}, 'utf8', &Jcode::getcode($tag->{TRACKNUM}), "z") || "";
        $TAGS{'GENRE'}  = Jcode::convert($tag->{GENRE}, 'utf8', &Jcode::getcode($tag->{GENRE}), "z")    || "";
    

    これで文字化け対策はおkなはず

    このままだとinit.dにファイルが置かれてなくてdaemonで起動できないのでdebianのものを置く

    sudo cp rcfiles/debian /etc/init.d/gnump3d
    sudo chmod +x /etc/init.d/gnump3d
    

    起動
    sudo /etc/init.d/gnump3d start

    これで起動できたはず
    デフォルトポートは8888なので、http://hostname:8888でアクセス

    ubuntu起動時にgnump3dを自動起動したいときは

    sudo update-rc.d gnump3d defaults
    

    と打つと自動起動するようになる
    自動起動をoffにするときは

     update-rc.d -f gnump3d remove
    

    gnump3dのconfigファイルは
    /etc/gnump3d/gnump3d.conf

    テーマやhtmlなどは
    /usr/share/gnump3d/

    perlのファイルは
    /usr/share/perl5/gnump3d/

    Ubuntu 設定

    No Comments

    Ubuntu10.10インストール

    Linuxをいじるのははじめてだからわからないことだらけ
    とんちんかんなことやってたら誰か突っ込んでください

    インストール時の設定は指示に従って進めるだけで終わった
    インストール時にOpenSSHとLAMPも一緒にいれといた
    OpenSSHはSSH接続するために必要なもの
    LAMPはApache,MySQL,Perl,PHP,Pythonをまとめたものらしい

    一つインストール時の罠が・・・
    ユーザー名は短すぎるとだめらしい
    最初ユーザー名3文字で設定してインストールしたんだけど、インストール後ログインしようとすると、
    ユーザー名かパスワードが間違ってます って言われた・・・
    ユーザー名とパスワードは6文字(?)以上じゃないとダメらしい
    せめて警告くらい出して欲しかった・・・

    初期設定

    Ubuntu入れてとりあえずやったこと

    文字化け対策

    sudo nano ~/.bashrc
    と打ってファイルに以下を追加する
    case $TERM in
    linux) LANG=C;;
    *) LANG=ja_JP,UTF-8;;
    esac

    ・sudo は管理者権限でごにょごにょしたいときに使うコマンド
    ・nano はデフォルトのテキストエディタっぽい
    ・bashはコマンド入力してるシェルのこと rcがつくとだいたい設定ファイルってことらしい
    管理者権限で、ホームディレクトリにある.bashrcを編集する という意味

    追加した文字列の意味は、
    TERM=端末 では、
    linuxなら、LANG=C Cはデフォルトという意味らしい つまり英語になる
    その他なら、日本語でUTF-8にする

    vimインストール

    vimっていうテキストエディタが好きなのでvimにする
    デフォだとvim-tinyっていうしょぼいvimしかはいってないっぽいのでちゃんとしたvimを入れる
    sudo apt-get install vim
    これでvimのパッケージを探して勝手にインストールしてくれる 便利
    vimの設定をいじりたいときは、ホームディレクトリの.vimrcをいじる(ないときは作る)

    IPの固定

    IPアドレスが固定されてないので固定する
    ルーター側で固定できるんだけど、せっかくなのでUbuntu側で
    sudo vim /etc/network/interfaces

    iface eth0 inet dhcp
    ここを、以下のように変更&追加
    iface eth0 inet static
    address 192.168.0.3
    netmask 255.255.255.0
    gateway 192.168.0.1

    ・address アドレスを自分で決める
    ・netmask gateway ルーター側の設定の通りに

    再起動して、ifconfigと打って指定したIPアドレスになってればおk

    DNSの設定

    DNSのアドレスを設定する
    これがないと、名前解決してくれない
    IP直打ちの人はいらない?

    sudo vim /etc/resolv.conf
    で、ネームサーバーのアドレスを書く
    うちはルーターがごにょごにょしてくれるので、ルーターのアドレスを書く
    nameserver 192.168.0.1

    Google Public DNSの「8.8.8.8」か「8.8.4.4」を設定してもいいのかな?

    NTPのインストール

    Network Time Protocol – Wikipedia
    NTPインスコしとけば時刻が正確になる
    sudo apt-get install ntp

    sudo vim /etc/ntp.conf
    で、
    # You do need to talk to an NTP server or two (or three).
    #server ntp.ubuntu.com
    この部分の下にサーバーを追加
    server ntp.nict.jp
    server ntp.nict.jp
    server ntp.nict.jp
    なんで3つ同じの書くかってのはここ参照
    NTP で時刻合わせ | 自宅サーバー Debian/Ubuntu

    パッケージアップデート

    sudo apt-get update
    sudo apt-get upgrade
    とすればインストールされてるパッケージを全て最新にできる
    でも既に最新だった

    サーバー買った

    No Comments

    きまぐれで、鯖の勉強でもするかってことで鯖買った
    買ったのはこれ
    ProLiant ML110 G6 (Core i3-530/2GB/SATA160GB) 5100780-AVCN
    5000円割引で1万8千円
    最初は自作しようと思ってたけど、物欲にまみれてこれ以上安くすることができなかったw
    メモリとHDDはあとから追加予定

    入れたOSはUbuntu10.10 Server Edition x64
    10.04LTS(長期サポート版)の方がいいかなーと思ったけど、勉強用だしまぁいいか

    ISO落として、さぁCDに焼くかってところで、CDないことに気付いた
    じゃあUSBメモリに入れてやろうと思ってググってたらこんなの見つけた
    窓の杜 – 【REVIEW】さまざまなOSのインストール“USBメモリ”を手軽に作成できる「UNetbootin」
    勝手にネットからOS落としてきてUSBメモリに入れてくれるらしい
    俺はもうISO落としてたからISOからやったけどw

    Ubuntuとの格闘はまた次回!

    お久しぶりです

    No Comments

    ブログではすごくお久しぶりです
    完全に放置してました
    ごめんなさい

    4月になりましたね
    俺は無事大学4年生になりました
    この前まで高校生だと思ってたのに・・・
    もうすぐ22歳ですよ
    ぐだぐだとやってきていつの間にかこんな歳になってしまいました
    ちょっと前まで10代でもてはやされていたのに、もうおっさんです・・・

    そろそろちゃんとアウトプットしないとだめですねってことで、
    ちゃんとブログ更新しますごめんなさい
    気分転換にブログのテーマも変えたった

    ブログ更新サボってたらTwitterでブログ更新しろって罵ってください

    Blue Taste Theme created by Jabox