Sparrow.jsの使い方

使い方

  • ダウンロードページより、sparrow.jsパッケージをダウンロードしてください。
  • ダウンロードしたzipを展開すると、「sparrow」というフォルダができあがります。
  • sparrowフォルダをサーバ上のドキュメントルートに配置してください。
  • 展開したsparrowフォルダの「sparrow/glyph/img.zip」を展開してください。
  • 「sparrow/glyph/img」というフォルダができますので、展開後は「img.zip」は削除してください。
  • HTMLのヘッド中に以下の記述例のように要素を記述する。
  • スマートフォンでアクセスし結果をご確認ください。

設定

  • ドキュメントルート以外に配置する場合はsparrow/sp_config-1.0.0.js を開き、basePath 変数にsparrowを配置するルートパスを設定してください。
  • 例:「ドキュメントルート/js」に配置する場合 → 「/js/sparrow/」
  • sparrowディレクトリをサーバー上のbasePathで指定したディレクトリに配置する。

記述例

<html>
  <head>
    :
    # basePathを変更した場合はsp_config-1.0.0.jsとsparrow-1.0.0.jsの2つを読み込んでください。
    <script type="text/javascript" src="/sparrow/sp_config-1.0.0.js"></script>
    # basePathの変更がない場合はsparrow-1.0.0.jsの1行を追加してください。
    <script type="text/javascript" src="/sparrow/sparrow-1.0.0.js"></script>
  </head>
  :
    </html>

※SCRIPTタグのsrc属性のパスは、配置した場所によって異なります。

使う上でのコツ

jsを適用するだけで、得られるのはフォントサイズの調整や画像サイズの調整です。Sparrow.jsではスマートフォンで表示する内容を変更したり、スマートフォンっぽいリストを簡単に作成することもできます。

詳しくは『よくある質問~FAQ~』をご覧ください。

システム要件

  • サーバー
  • WEBサーバー
  • QVGAもしくはVGAベースのコンテンツ
  • クライアント
  • iPhone、iPad、Android(2.2以上)、WindowsPhone7

パッケージ構成

  1. glyph – 絵文字ファイル
  2. arr.jpg – スマホ専用CSSからリンクされる画像
  3. jquery-1.6.2.min.js – jQuery本体
  4. marquee.js – marqueeエミュレート
  5. smoothScroll.js – ページ内リンクスクロール
  6. sp_config-1.0.0.js – 基本動作設定ファイル
  7. sp_core-1.0.0.js – メインの処理が記載されたJSファイル
  8. sparrow-1.0.0.css – スマートフォン向けに最適化された専用CSSファイル
  9. sparrow-1.0.0.js – HTMLからリンクされるガラプラJS