Flashだけじゃない！すごいWeb統合開発環境「FlashDevelop」

FlashDevelopのすすめ

Q. FlashDevelopって何？
A. エディタだよ。統合開発環境(IDE)だよ。

• ダウンロード
  • http://www.flashdevelop.org/

FlashDevelopをすすめるわけ

• 軽い
• インストールや日本語化が簡単
• 部分一致による入力補完(diobcと入力するとDisplayObjectContainerが補完されるみたいなの)

そして…

Flashだけじゃない！

FlashDevelopがサポートしてる言語は以下の通り

• ブラウザ系

  • HTML
  • CSS,SCSS,LESS,HSS
  • JavaScript,TypeScript,Haxe
  • ActionScript2,ActionScript3,Haxe

• サーバーサイド

  • PHP
  • Python
  • Haxe

• その他いろいろ

  • C++
  • C#
  • Loom

各言語のサポート状況

• AS3

  • シンタックスハイライトと高度な入力補完
  • 強力なリファクタリング機能
  • プロジェクト管理
  • ASDoc生成などもやってくれる
  • いたせりつくせり。すばらしい。

• Haxe

  • シンタックスハイライトと高度な入力補完
  • AS3に比べてリファクタリング機能は弱い
  • プロジェクト管理(as3,air as3,as2,flash,nme,openfl,neko,php,c++)が強力
  • ちょっとコマンドラインツールも使いたいときとかにNekoとかが使えるのが便利

• TypeScript

  • シンタックスハイライトと簡単な入力補完
  • そもそも、言語仕様上Haxeほど高度な入力補完は難しい気がする。VisualStudioでもファイル横断の入力補完はできなかった記憶がある
  • プロジェクト管理あり
  • 今のところエラー表示がちょっとおかしい？

• HTML

  • シンタックスハイライトと簡単な入力補完。
  • Zen-Codingが入ってる。

• SCSS、LESS、HSS (コンパイルしてCSSを出力するやつ。変数使ったり入れ子使ったりできる)

  • シンタックスハイライトと簡単な入力補完。
  • コンパイラとか自分でインストールする必要無し
  • .scss、.less、.hssなどの拡張子で保存したら、自動で.cssを出力してくれる。
  • さらに空白の除去をした.css.minファイルも出力してくれる。
  • Compassとか使おうとすると逆にめんどくさい。

Sass(SCSS)は、http://sass-lang.com/download.html でインストールしとく。
Less http://lesscss.org/ はnpmでインストールしとく。

• JavaScript

  • シンタックスハイライトと簡単な入力補完。

• PHP

  • シンタックスハイライトと簡単な入力補完。
  • プロジェクト管理無し。
  • NetBeansとかと比べると見劣りする。
  • 静的ページ中心のプロジェクトでちょことだけPHP書きたいときに便利。

• Loom

  • 最近サポートされた、AS3っぽい言語
  • LuaVM上で動くらしい

HTML、CSS(SCSS,LESS)、JavaScript(Haxe,TypeScript)がFlashDevelop一つで十分にサポートされているのがうれしい

日本語化

プラグインなどは必要なし
Tools > Program Settings.. > localeで検索 > Selected Localeをja_JPに設定 > FlashDevelopを再起動

よく使うショートカットキー

• テキスト系

  • 行コピー(何も選択せずCtrl+C)
  • 行カット(何も選択せずCtrl+X)
  • 複製(Ctrl+D)
  • 矩形選択(Alt+Shift+方向キー)

• タブ系

  • 現在のタブを閉じる(Ctrl+W)
  • 他のタブを閉じる(Ctrl+Shift+W)
  • 閉じたタブを復元する(Ctrl+Shift+T)

• 検索系

  • 検索(Ctrl+F)
  • 置換(Ctrl+H) *　ファイル横断の検索と置換(Ctrl+I)
  • 行へ移動(Ctrl+G)
  • 変数、クラスの定義に移動(F4)
  • F4で移動した場所にもどる(Shift+F4)

• その他

  • コンパイルして実行(F5)
  • 文字サイズ変更(Ctrl+ホイール)
  • 入力補完(Ctrl+スペース)
  • コードスニペット(Ctrl+B)

[その他のショートカットキー | FlashDevelop.jp]

ショートカットキーを設定する

ツール > キーボードショートカットの編集

• import文の整理(RefactorMenu.OrganaizeImports、Ctrl+Shift+Oとか)
• 変数名などのリネーム(RefactorMenu.Rename、Ctrl+Rとか) あたりを設定しとくと便利

スニペットを設定する

ツール > コードスニペットの編集

使用できるアーギュメント一覧 | FlashDevelop.jp

プロジェクトを自作する

1. アプリケーションフォルダを開く(ツール > アプリケーションファイルの表示)
2. インストールフォルダを開く(FlashDevelopのショートカットを右クリック > ファイルの場所を開く)
3. インストールフォルダのProjectsから適当なフォルダを1つアプリケーションフォルダにコピーする
4. 元のフォルダを参考に変更を加える。

プロジェクトのテンプレートに使用できるアーギュメント | FlashDevelop.org

プラグインを作る

SharpDevelopでC#を書くんだけど、SharpDevelopの使い勝手がFlashDevelopとかなり近いのでわりと書きやすい。
プラグインのつくりかた | FlashDevelop.jp

FlashDevelopやるならHaxeやろーぜ!

Q. Haxeって何？
A. 近代的で使いやすいプログラミング言語です。そして、書いたプログラムをFlashに出力することも、JavaScriptに出力することも、PHPに出力することも、スマホアプリに出力することも可能です。

FlashDevelopを使えば、Haxeでの開発で手厚いサポートが受けられます。

詳しくは、http://haxe.org/

Haxeのインストール

http://haxe.org/download

OSにあったインストーラをダウンロードして指示に従ってインストールするだけ

haxelibを使う

• apt-get,yum,rpm,npmみたいなことができるツール。いわゆるパッケージ管理ツール
• haxelib install createjsみたいなコマンドを打って使う

hxmlを使う

• FlashDevelopでは、1プロジェクトで複数ファイル出力したい時などに使う

• F5で使いたいときは、プロジェクト設定で、

  1. コンパイルターゲット をカスタムビルドに設定
  2. ビルド　>> ビルド前に実行するコマンドライン に$(CompilerPath)\haxe.exe $(ProjectDir)\compile.hxmlを設定

• hxmlでよく使うコマンドオプション

  • -js [出力するjsのファイル名(*.js)]
  • -main [パッケージ名.メインクラス]
  • -cp [ソースのあるフォルダ]
  • --next :次のコンパイルに使うオプションを指定する
  • --each :each以前に書いたオプションを以降のコンパイルすべてに適応する

ソースマップを使う

Chromeのコンソールに実行エラーが表示されたときに、Haxeのエラー行が分かるようにする。

[ソースマップについて]

FlashっぽいことやるならOpenFL使おうぜ！！

OpenFLってなに。

• FlashのAPIと、同じのAPIでHTML5+Canvasやスマートフォンネイティブなアプリケーションを作れるようにしようってプロジェクト。
• AS3やってた人ならほぼ同じような感覚でHTML5+Canvasのアプリケーションが作れる。

OpenFL使えばこんなのが作れるよ

Showcase | openfl.org
Jeash.com

altJS開発環境勉強会であった質問

http://atnd.org/event/E0017571 で聞かれたのですが答えられなかった質問があったので、ここで回答します。

Q. haxelibってバージョンによってインストールフォルダを分けたいときに、フォルダを指定してインストールすることは出来るんですか?

A. 出来ないっぽいです。っていうかそもそもhaxelibはライブラリのバージョンによってインストールされるフォルダがデフォルトで異なります。たとえばcreatejsの1.4.0版をインストールした場合、haxe/lib/createjs/1,4,0/にインストールされます。インストールしたいバージョンの切り替えは、haxelib install createjs 1.4.0みたいに指定することができます。コンパイル時にはライブラリのバージョンを-lib createjs:1.4.0みたいなオプションで指定することができます。

Q. Haxeの開発で変数名の変更があまり効きません…。自分の環境だけでしょうか?

A. Haxeでのリネームはほとんどの場合出来ません。…と答えましたが、入力補完が効く場合もあります。

一括リネーム出来るもの

• メンバ変数(staticも、そうでないものも)
• 関数の引数名

出来ないもの

• ローカル変数
• 関数
• クラス名、インターフェイス名

Haxeにはコンパイラが持っている入力補完機能をつかっていて型推論とか構文解析とかの機能が足りてないのでリネームができないみたいなこと言ったのですが、Haxeのコンパイラにはリネームの機能も入っているのでそこがサポートされている範囲ではリネームが出来るみたいです。

以下にチラッと書いてありました
http://www.flashdevelop.org/community/viewtopic.php?f=6&t=9827