MD-Blog_Web Creative

"超"がつくほどの万能Editor「IntelliJ IDEA」でBowerを設定 & 実行してみよう！

IntelliJ IDEAとは？

さっきも書いたけど超がつくほどの万能Editor。
Java, Scala, Groovy, Maven, SVN, Gitにプラグインを入れれば、PHP, JavaScript, ActionScriptがいい感じコード補完で書けて、設定次第ではAIRとかもコンパイルができるbestなIDEであります。

元々はチェコにあるJetBrainsという会社が開発したIDE（有料）。

他にもPHPの為のPhpStormやWebStormなどがあります。

2014/08/01時点では全IDEのメニューなどの表示言語は英語のみですが、今現在国際化機能の強化とのことで日本語化も進んでるようです。（一部ユーザーには提供されてるらしい...）

詳しくは本家のサイトをご覧ください。

また購入の際に英語じゃ不安とゆう方は、JetBrainsの公認代理店であるサムライズムさんからここでライセンスを購入できます。

■ 公式Twitter

• サムライズム@samuraism

• JetBrains@jetbrains

  ホント、ごくたまにJetBrainsさんの方でセールやるんでTwitter等でアナウンスされます。

Bowerとは？

Twitter社作った"フロントエンド用"のパッケージマネージャです。
Javaで言うとこのMavenだったり、Rubyで言うとこのgemだったり、Node.jsでいうnpmといったパッケージに影響されて作成されたとのこと。

ただここで勘違いしないで欲しいのがあ.く.ま.で"フロントエンド用"です。
たまにPHPときは？　WordPressのときは？　MTのときは？　って言う人がいますが。
"フロントエンド用"です。勘違いしないように！

じゃいつどんな時に使うの？と疑問に思いますが。
例えばWebサイトを作成する時に、ほとんどのサイトでみんな大好きjQueryを使うかと思います。
その時、jQueryの本家サイトからダウンロードするかと思います。（CDN読み込みは別ね）
その作業をBowerがやってくれます。

大分ザックリした解説ですが、公式サイトを見てくれればわかるかと。

さっそくやってみる

さっそくやってみようと思います。
Bowerを使うには普通は黒い画面（terminal）でやるのですが、今回はこの記事の題にもあるように「IntelliJ IDEA」でやってみたいと思います。
※最初、少しだけterminalを使用します。

また以下の環境を想定して書いています。

• Mac OSX 10.8.5
• Node.jsはインストールされてる

1. terminalで入力

    sudo npm install -g bower

下記画像参照

2. projectに移動

1が終わったら

   
    bower init

これを入力すると

    ・name
    ・version
    ・description
    ・main file
    ・what types of modules does this package expose? 
    ・keywords
    ・authors
    ・license
    ・homepage
    ・set currently installed components as dependencies?
    ・add commonly ignored files to ignore list?
    ・would you like to mark this package as private which prevents it from being accidentally published to the registry? No/N)

って聞かれるのでそのプロジェクトに関する事を入力していく。

例：

    name: Test
     version: 0.0.1
     description: This is test.
     main file: （何も入力したくないのでEnterキーを押す）
     what types of modules does this package expose? （何も入力したくないのでEnterキーを押す）
     keywords: Test
     authors: Junichi Honda
     license: MIT
     homepage: https://www.monster-dive.com
     set currently installed components as dependencies? No
     add commonly ignored files to ignore list? Yes （ここをYESにすると無視してくれるファイルをbower.jsonに記載される）
     ・ would you like to mark this package as private which prevents it from being accidentally published to the registry? No/N) N

と入力するとbower.jsonが出来上がっている。
中身を見ると、

bower.json

        {
            "name": "Test",
              "version": "0.0.1",
              "authors": [
                "Junichi Honda"
              ],
              "description": "This is test.",
              "keywords": [
                "Test"
              ],
              "license": "MIT",
              "homepage": "https://www.monster-dive.com",
              "ignore": [
                "**/.*",
                "node_modules",
                "bower_components",
                "test",
                "tests"
            ]
        }

と出力されている。
こんな感じで出来ている。

3. IntelliJ Ideaの設定

「IntelliJ IDEA：のアプリケーションを開き、左上のmenuの IntelliJ IDWA > Preferences... を開く。

開くとPreferenceとゆう小窓が出てくるので、その左側のJavaScript > Bowerを選択する。
そこに、

• Node interpreter:
• Bower executable
• bower.json
• Dependencies

と出てくる。

Node interpreterには /usr/local/bin/node と入力（Node.jsのありかです）。

Bower executableには /usr/local/bin/bower と入力（bowerの場所）。

bower.jsonには、プロジェクト直下のbower.jsonを指定する。

上記を指定したら今度はDependenciesを設定します。
Dependenciesの下箇所の+ボタンをクリックする。

押すと、さらに Available Packages の小窓が出てきて、色々選択できる画面が出てくるかと思います。

ここで自分が使いたいJavaScriptを探すことができます。
今回はjQuery、require.js、TweenMaxを使いたいのでそれらをここから探しましょう。

まずは虫眼鏡の所でjQueryと入力する。
そうすると色々とjQueryのライブラリが出てくるかと思いますが、今回は純正のjQueryを使いたいので一番上に出てくる jQuery を選択、そして Available Packages 小窓の左下の Install Packages をクリックします。

そうすると今クリックした Install Packages が非アクティブ化するかと思います。
（これはインストールされたってこと）

次にまた虫眼鏡の所でrequire.js、TweenMaxを探してインストールしてみる。
requirejsと入力すると色々と今回も出てくるかと思います。
そーゆうときは Available Packages 小窓の右側の Description を読みます。
Descriptionを見ると、JSON形式で

• name
• version
• homepage
• authours
• description

などなど記載されてると思うので、純正のrequirejsを読み込むには homepage が純正のホームページと同じかを見ます。
見つかったらまた Install pacakges をクリック。

さらにまた虫眼鏡でTweenMaxと入力してみる。
今回は何も出てこない...

この様に出てこない時もあるので、その時はオフィシャルWebサイトに行ってみたり、githubに行ってみる。
githubを見ると、TweenMaxのgreenshockもbower.jsonを持ってるみたいなので、見てみるとnameの箇所がgsapとなってるので虫眼鏡の箇所にgaspと入力してみる。
そうすると複数見つかるので、またDescriptionを見て該当のやつを選択してInstall Packageをクリックする。

そしたら上記の流れで

• jQuery
• requirejs
• TweenMax

の設定が終ったのでAvailable Packagesの小窓は閉じて、 Preferencesの小窓のDependenciesにそれらが追加されてるかと思います（スクリーンショット参照）。
追加されてるのが確認できてたらOKボタンをクリックして閉じる。

閉じたら自分のプロジェクト内のbower.jsonを見ると

 
    {
      "name": "Test",
      "version": "0.0.1",
      "authors": [
        "Junichi Honda"
    　],
    　"description": "This is test.",
    　"keywords": [
    　 "Test"
    　],
    　"license": "MIT",
    　"homepage": "https://www.monster-dive.com",
    　"ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    　],
    　"dependencies": {
        "jQuery": "~2.1.1",
        "requirejs": "~2.1.14",
        "gsap": "~1.13.1"
    　}
    }

とdependencies内に

• jQuery
• requirejs
• gsap

が追加されているかと。

さらに自分のプロジェクト内のフォルダにbower_componentsが出来ていて、

• gsap
• jQuery -requirejs

上記フォルダが出来ていて、その中にそれに対応するJSが入ってるかと思います。

以上で「IntelliJ IDEA」でのbower.jsonの設定の仕方でした。

ここで基本的なBowerの設定は終わりですが、gruntのモジュールの"bowercopy"と組み合わせてbowercopyのタスクを実行させると、Gruntfile.js側で設定したフォルダにbower_componentsフォルダ内のJSをコピーしてくれます。コピーした後は不要になるこのbower_componentsフォルダを自動で削除してくれるモジュールなどもあるので、調べてみてはいかがでしょう。