JS

bower registerで公開したライブラリを更新した場合に必要な作業

少し前の話ですが、自分の作ったライブラリ(Polymerで作ったWeb Components)をbower registerしてbowerでinstallできるように公開していたのですが、ベースとなるPolymerのバージョンアップに対応して変更をmasterにpushしてOKだと思ってたら、git cloneすると動くのにbower installするとうっかり動かなくなっていました。 (more…)

JS

自作Web Components公開までの道

今月のHTML5のイベントで喋る題材としてPolymerとWeb Componentsについてお話をしようかと思っているので、お遊びで作ってみました。 left-swipe-actionというiOSのリストで左へスワイプすると後ろにActionボタンが現れるあれみたいなやつです。 画面イメージ1 スクリーンショット 2014-08-07 12.10.16 画面イメージ2 スクリーンショット 2014-08-07 12.04.19 Demoページ http://tejitak.github.io/left-swipe-action/demo.html (注:Polymerがサポートしていないブラウザでは見れないため、Android標準のブラウザ等では見れないです) 以下、初めてWeb Componentsを作ってみるところから、bowerやgalleryサイトへの登録までの流れをざっと紹介します。 (more…)

JS

requirejsをbowerでインストールしてgruntでビルドする

私はJSを書くときはAMD推奨派なので、比較的大きめのアプリを作るときはまずrequireJSなどを使用します。 requirejsを使ってモジュールを作成すると依存関係が明確になり、テンプレートなどもrequirejs-textなどを使用すれば再利用がとても容易な形で記述することができます。 ただし、AMD時の一つの懸念点としてビルドして依存モジュールをconcat&uglifyしなくてはパフォーマンスがでないという点が挙げられます。そこで探してみるとgruntのtaskモジュールで内部的にr.jsを使用してビルド(依存モジュールの連結+compress)を行ってくれる便利ツールを発見。これを使えばパフォーマンスに関する問題は大丈夫でしょう。 以下、少し長いですがセットアップ手順です。 (more…)

Tools

gruntのbower installでtargetDirにcopyするファイルを制御

下記のサイトにあるようにgruntを使用してbower installをしている場合に、targetDirにコピーされるファイルを制御したい時のTips。 http://qiita.com/mekkoo/items/e5a1670d85726cf6c61c bowerでtargetDirを指定して、インストール&コピーを行った際に、いくつかのJSはきちんとメインのjsファイルのみコピーされる一方、いくつかのものはディレクトリ丸ごとコピーされてしまうケースがある。その場合不要な物をwebに公開してしまう恐れがあるので、制御しておいたほうが良い。 Gruntでの指定の例

bower: {
   install: {
      options: {
         targetDir: 'js/lib',
         layout: 'byType',
         install: true,
         verbose: false,
         cleanTargetDir: true,
         cleanBowerDir: false
      }
   }
}
  (more…)