38
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-08-01

#FlashDevelopのすすめ

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

##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

38
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?