mixiアプリでcss,js,img などの外部ファイルを使用するときの注意点をメモ

mixi

mixiアプリでcssを使うときには気をつけなきゃいけないことがあったので、メモ。

１．キャッシュを無効化する方法

opensocial には大きく別けて、４つのキャッシュが存在します。

  1. ガジェットXMLのキャッシュ
  2. makeRequestでアクセスされる外部APIのキャッシュ
  3. featureを固めたJavaScriptのキャッシュ
  4. JavaScript、CSS、imgなどHTMLからリンクされたリソースのキャッシュ

この４つです。


今回は、一番下の
『JavaScript、CSS、imgなどHTMLからリンクされたリソースのキャッシュ』
の回避方法をメモ。


cssを読みこませるには、絶対パスで指定すればいいです。

<link href="http://sample.com/sample.css" rel="stylesheet" type="text/css">

こんな感じ。


しかし、mixiアプリはキャッシュが強力なので、すぐにcssされます。
これは、実際に公開した後は負荷を減らしてくれて便利ですが、開発中は不便なことこの上ありません。


htmlのキャッシュは『アプリ設定画面』の『キャッシュを消去』から消すことができますが、cssは過去のキャッシュを読み続けて、全く反映されないってこともしばしば・・・。

gadget XMLにキャッシュ無効の記述を行う。

opensocial には Content Rewriter という機能があり、この記述をXMLに書くことでキャッシュを制御できます。


こちらのサイト様に詳しく書いてありました。
Tender Surrender » content-rewite機能で外部ファイルのキャッシュを制御する


86400

excluded
moreexcluded
true
true
true

  1. expires: キャッシュの有効期限を秒で指定。デフォルトは86400秒(24時間)。
  2. include-url: キャッシュしたい外部コンテンツのURLを指定。"*"アクタリスクが使える。".gif"などとすると、前後にアスタリスクがあるものと想定される。繰り返し可。
  3. exclude-url: キャッシュしたくない外部コンテンツのURLを指定。適用方法はinclude-urlと同じ。
  4. minify-css: CSSファイルの内容を圧縮してキャッシュするかどうかを"true"または"false"で指定。デフォルトは"true"
  5. minify-js: JSファイルの内容を圧縮してキャッシュするかどうかを"true"または"false"で指定。デフォルトは"true"
  6. minify-html: HTMLファイルの内容を圧縮してキャッシュするかどうかを"true"または"false"で指定。デフォルトは"true"

そこでこんな記述をXMLに加えてみましょう。

    <ModulePrefs title="use Social Data">
        <Require feature="opensocial-0.8"/>
        <Optional feature="content-rewrite">
            <Param name="exclude-urls"></Param>
            <Param name="exclude-urls">.*</Param>
            <Param name="include-tags"></Param>
        </Optional>
    </ModulePrefs>

これで、css 及び、全ての外部ファイルがキャッシュされなくなります。

キタコレ〜

２、css内から画像を呼び出している場合、絶対パスにする。

相対パスから絶対パスに書き換えてあげましょう。
特に、ライブラリなどを入れてる人は、注意が必要。
なんかレイアウトが崩れているときは、css内のパスを確認してみましょう。


さ〜て、今日も開発〜。