tDiaryプラグインのJavaScript動的ロード方法について調べてみた

2011-06-12

日曜日に少し早起きしたので、日記を書く。引き続き、tDiaryのJavaScript比重を高める計画(というほどのものではないけど) - ただのにっき(2011-06-07)より。

最近プラグインから.jsファイルのロードをコントロールできるようにしたので

と書かれているので、tDiaryプラグインがどうやってJavaScriptを呼び出せば良いのかを調べてみた。

まずはGitHubから最新のソースを取得する。

$ git remote show tdiary
* remote tdiary
  Fetch URL: git@github.com:tdiary/tdiary-core.git
  Push  URL: git@github.com:tdiary/tdiary-core.git
  HEAD branch: master
  Remote branches:
    master                       tracked
    refs/remotes/tdiary/testable stale (use 'git remote prune' to remove)
    tdiary-request               tracked
  Local branch configured for 'git pull':
    testable merges with remote testable
  Local ref configured for 'git push':
    master pushes to master (up to date)

$ git pull tdiary master

さっそくjsフォルダの中を見てみる。

$ ls js/
00default.js    amazon.js       category.js

なるほど。プラグインフォルダと同じようなファイル構成になってる。ということは、tDiaryプラグインから制御しているかも。プラグインフォルダをjavascriptで検索。

$ grep javascript -i plugin/*
plugin/00default.rb:    %Q[<meta http-equiv="Content-Script-Type" content="text/javascript; charset=#{h charset}">]
plugin/00default.rb:    %Q[<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>]
plugin/00default.rb:    html = @javascripts.sort.map {|script|
plugin/00default.rb:            %Q|<script src="js/#{script}" type="text/javascript"></script>|
plugin/00default.rb:            <script type="text/javascript"><!--
plugin/00default.rb:            #{@javascript_setting.map{|a| "#{a[0]} = #{a[1]};"}.join("\n\t\t")}
plugin/00default.rb:                    <script type="text/javascript"><!--
plugin/00default.rb:    <script language="JavaScript"><!--

00default.rbが引っかかったので、中を見てみる。

$ vim plugin/00default.rb
361 def script_tag
362    html = @javascripts.sort.map {|script|
363       %Q|<script src="js/#{script}" type="text/javascript"></script>|
364    }.join( "\n\t" )
365    html << "\n" << <<-HEAD
366       <script type="text/javascript"><!--
367       #{@javascript_setting.map{|a| "#{a[0]} = #{a[1]};"}.join("\n\t\t")}
368       //-->
369       </script>
370    HEAD
371 end

script_tagメソッドでJavaScriptファイルの呼び出しをやっていることが分かった。 @javascript 変数の配列内に入っているJavaScriptファイル名を呼び出している。とすると、どこかで@javascriptに値をセットしているはず。

次に@javascriptで検索。

$ grep @javascripts -r *
plugin/00default.rb:    html = @javascripts.sort.map {|script|
tdiary/plugin.rb:                       @javascripts = []
tdiary/plugin.rb:                       @javascripts << script unless @javascripts.index( script )

tdiary/plugin.rbを発見。開く。

$ vim tdiary/plugin.rb
307       def enable_js( script )
308          @javascripts << script unless @javascripts.index( script )
309       end

enable_jsメソッドにファイル名を渡せば@javascript配列に格納してくれるのか。次はもちろんenable_jsで検索。

$ grep enable_js -r *
ChangeLog:      * added Plugin#enable_js and Plugin#add_js_setting method for inserting javascripts.
doc/HOWTO-make-plugin.html:<tr><th style="white-space: nowrap;">enable_js( script_file_name )</th><td>jsディレクトリ配下にあるJavaScriptを有効にする(例: 'amazon.js')。このメソ ッドで有効にしたファイルは、HTMLヘッダ内に呼び出された順番に埋めこまれます。</td></tr>
doc/HOWTO-make-plugin.html:<tr><th style="white-space: nowrap;">add_js_setting( var, val )</th><td>enable_jsで埋めこまれたJavaScriptへのパラメタを受け渡す。「var」には変数名を 与えます。標準では「$tDiary.plugin.プラグイン名.変数名」で、「$tDiary.plugin」までは名前空間としてtDiary側で確保済みです。「val」には変数に与える値をJavaScriptとして有効な形の 文字列で指定します。例えば「abc」という文字列であれば「"'abc'"」のようにする必要があります。</td></tr>
misc/plugin/amazon.rb:  enable_js( 'amazon.js' )
misc/plugin/category.rb:        enable_js( 'category.js' )
plugin/00default.rb:enable_js( '00default.js' )
tdiary/plugin.rb:               def enable_js( script )

おお。doc/HOWTO-make-plugin.htmlに使い方が書いてあることが分かった。また、 plugin/00default.rb や misc/plugin/amazon.rb に呼び出しの例がある。各プラグインで、以下のように指定すればいいのね。

enable_js( 'amazon.js' )

これまでは自前で <script src=”…”> と書いていたので、かなり楽になってる。

まとめ

tDiary: How to make pluginにちゃんと使い方が書いてあった。

enable_js( script_file_name ) jsディレクトリ配下にあるJavaScriptを有効にする(例: ‘amazon.js’)。このメソッドで有効にしたファイルは、HTMLヘッダ内に呼び出された順番に埋めこまれます。
add_js_setting( var, val ) enable_jsで埋めこまれたJavaScriptへのパラメタを受け渡す。「var」には変数名を与えます。標準では「$tDiary.plugin.プラグイン名.変数名」で、「$tDiary.plugin」までは名前空間としてtDiary側で確保済みです。「val」には変数に与える値をJavaScriptとして有効な形の文字列で指定します。例えば「abc」という文字列であれば「“‘abc’“」のようにする必要があります。