bower に table のカラムの表示/非表示を自由に選べるライブラリを追加してみた

皆さん。こんにちは。MUGENUP のosadaです。

電車を降りようとしたら、スマホを線路に落としました！ 駅員さんにお願いして取っていただいたところ、 なんと画面が割れることもなく無事でした！ラッキー！ そんな運が良い osada がお送りする今回は、bower のお話です。

js のパッケージ管理ツール Bower。 皆さん使っていらっしゃいますか？ 弊社では、bowerパッケージを自動でgemにしてくれるRailsAssetsというサービスを使って、 Rails上でbowerを使っています。

今回はそんなbowerのパッケージを作ってたみたので、レポートします。

要点

  • js ライブラリのデモページは、github pages が良かった
  • githubのソースを、<script> として読み込む rawgit
  • RailsAssets に bower を直ちに反映させたければ、Add Componet

表示するカラムを自分で決められるTable 用 jQuery プラグイン

弊社はクリエイティブの幅広い部分をカバーする会社ですので、 多くの案件と複数の職種が入り乱れて、ゴールを目指します。 すると、同じ案件の情報でも、見たいものが異なるのは自然なことです。 さらにいうと、同じ職種の人でも、見たいものが異なるということも、 よくあります。

そこで作ったのが、table_as_u_like です。

  • Table as u like
  • 機能
    • テーブルの th を読み込みトグルボタンにする
    • トグルによって、カラムの表示/非表示が切り替えられる
    • session によって、個人ごとに状態を維持する

coffeescript で 45行の簡単なプラグインですが、便利に使っています。 今回はこれをbowerに登録しました。

bower に登録する前に

Rails用に開発したので、ライブラリとして公開するのに必要なものが2つありました。

  1. Railsの代わりにcoffeescriptをコンパイルする環境
  2. デモ用のページ です。

gulp で coffee を コンパイル

coffeescript のコンパイルだと、 Gruntが思いつきますが、 今回は gulp.js を使ってみました。

設定ファイルが書きやすい、速い、など、Grunt を改良したツールということでしたが、 1つの coffee をコンパイルする程度だと、あまり違いが感じられませんでした。 今度は大規模なものに使ってみたいところです。

  • インストール
npm install -g bower
npm install -g gulp
npm install --save-dev coffee-script
npm install --save-dev gulp-coffee
  • 設定ファイル
gulp.task 'coffee', () ->
  gulp.src files.coffee
    .pipe coffee()
    .pipe gulp.dest('lib')

設定ファイル、というより、シェルスクリプト、といった感じでした。 勿論watchもあるので、安心です。

github pages でデモ用のページを作る

動的な要素が不要な場合、github pagesはとても便利です。

github の settings から github-pages を有効にすると、 gh-pages というブランチが作られます。 以降はそのブランチへpushすることで、反映されるという簡単構造です。 (多少遅延があります)

jekyll が使えるということでしたので、 大きなページを作る場合は、そちらの方が良いですね。 今回は1ページだったので、 ローカルでサーバを起動して、 開発して、push という手順でした。

こんなときはpythonが大活躍。

python -m http.server

小さなものなら、これで十分ですよね。

github に置いたまま <script> で読み込む rawgit

さて、そんな便利なgithub-pagesですが、唯一困ったのか、 ライブラリの読み込みです。

jquery は cdn を使って読み込めます。

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

ですが、github においてあるファイルは、そのままでは読み込めません。 例えば、こう書くと

<script src="https://raw.githubusercontent.com/osdakira/table_as_u_like/master/lib/jquery.table_as_u_like.js"></script>"

こう怒られます。

Refused to execute script from 'https://raw.githubusercontent.com/osdakira/table_as_u_like/master/lib/jquery.table_as_u_like.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

github がこれを禁止していて、理由は、遅いから、 *1 ということのようです。

この制限を迂回するサービスがrawgit.comです。 ヘッダを付与することで、githubへのダイレクトなアクセスを行い、 かつ、キャッシュすることでスピードを上げているようです。 デモの用途であれば*2、使用できるようです。

f:id:mgnup:20141202095930p:plain

そうしてできたデモが Table as u like です。 index.html一枚で、js, css は全て外部から読み込んでいます。

bower に登録する

bower の登録については、既に多くの記事があるので(皆さん、ありがとう！)、概要のみ記載します。

  1. bower をインストール
  2. bower init で対話形式でbower.jsonを作成
  3. bower register で登録
npm install -g bower
bower init
bower register table_as_u_like git@github.com:osdakira/table_as_u_like.git`

とても簡単でした。

RailsAssets に Add Componet する

ところが、bowerには登録されていても、RailsAssetsには出てきませんでした。 RailsAssetsへの登録は非同期で行われているようで、遅延があるようです。 この場合、AddComponetを使うことで、 直ちに反映させることができました。

f:id:mgnup:20141202095955p:plain

bower が自動的にgem になる。なんて便利なんでしょう！

まとめ

以上がjsライブラリをbowerに登録してみたレポートです。

  • js ライブラリのデモページは、github pages が良かった
  • githubに置いたまま、<script> として読み込む rawgit
  • RailsAssets に bower を直ちに反映させたければ、Add Componet

そうそう、最後にもう一つ。 線路にものを落とした時は、 何番線の何号車の位置に落としたかを伝えましょう。 びっくりしますし、焦ってしまいますが、 それを伝えることができたら、話はスムーズです。 (私は上りと下りを間違えて、ウロウロしてしまいました)

では、良い geek ライフを！

参考

*1:Heads up: nosniff header support coming to Chrome and Firefox

*2:アクセスが少なく、負荷をかけないもの