本文へジャンプ

「IntelliJ IDEA」でBowerを実行してみる

Posted by MD

IntelliJ IDEAでBowerを実行してみる

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

IntelliJ IDEAとは?

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

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

他にもPHPの為のPhpStormWebStormなどがあります。

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

下記画像参照

図1 - 「IntelliJ IDEA」で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"
]
}

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

図2 - 「IntelliJ IDEA」でBowerを実行してみる

3. IntelliJ Ideaの設定

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

図3 - 「IntelliJ IDEA」でBowerを実行してみる

開くと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の下箇所の+ボタンをクリックする。

図4 - 「IntelliJ IDEA」でBowerを実行してみる

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

図6 - 「IntelliJ IDEA」でBowerを実行してみる

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

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

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

図6 - 「IntelliJ IDEA」でBowerを実行してみる

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

  • name
  • version
  • homepage
  • authours
  • description

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

図7 - 「IntelliJ IDEA」でBowerを実行してみる

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

図8 - 「IntelliJ IDEA」でBowerを実行してみる

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

図9 - 「IntelliJ IDEA」でBowerを実行してみる

そしたら上記の流れで

  • 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

が追加されているかと。

図10 - 「IntelliJ IDEA」でBowerを実行してみる

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

  • gsap
  • jQuery -requirejs

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

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

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+