User Tools

Site Tools


links:jscripts

jscriptsとは

現在使っている、または今後使えそうなJavaScript一覧です。

Javascriptライブラリ

  • jQuery:デザイナーに分かりやすいと言われているライブラリ。
    • jQuery mobile:モバイル用jQuery、スマートフォン対応版
  • mootools:軽量Javascriptライブラリ。
  • UKI:今風のインターフェースを簡単に作りあげてしまうらしい。

Lightbox関連

The Lightbox Clones Matrixから、テストしたことがあるやつだけ並べています。

スクリプト名 画像 HTML SWF ムービー ライブラリ JS CSS
jQuery lightBox plugin X jQuery 2 1
Lightbox X Scriptaculous, prototype.js 3 1
Slimbox X mootools 2 1
Slimbox2 X jQuery 2 1
ThickBox X inline,iframe X jQuery 2 1
Fancybox X inline,iframe jQuery 2 1
Lightwindow X inline,iframe,form,外部URL X X Scriptaculous, prototype.js 3 1
Shadowbox X inline,iframe,form,外部URL X X Scriptaculous, prototype.js 2 or 3 1
Fancy Zoom X inline X jQuery 2 1
VideoBox X mootools 3 1
MopBox X DIV X X jQuery 6 1

注釈

jQuery lightBox plugin LightboxをjQuery化したもの。オリジナルより軽快に動作し、読み込みファイルも少なくできている。
Lightbox ここが全ての始まり。JSライブラリを2つも読み込むため、使い勝手はいいが、この中では一番動作が重い。ブログなどのシステムに導入するにはちょっと考える。
Slimbox Lightboxと同じ外観を保ちつつ、軽いmotoolsライブラリをベースにしたものです。 WordPressプラグイン
Slimbox2 Slimboxの改良版、ライブラリもjQueryに最適化されている。
ThickBox 1) 余計なエフェクトは全部カット、一瞬で画像が表示されます。ウィンドウ外側の太い枠が特徴でThick(=太い), Box(=ボックス)と呼ばれる。別途HTMLファイルを読み込んで表示させることができる。WordPressなどの管理画面に導入されている。
Lightwindow ロードエフェクトは最初のみ。最初から多種多様なメディア形式に対応しているので、画像とそれ以外のものをポップアップウィンドウで表示しているサイトに最適といえる。
Shadowbox Lightwindowに似ているが、外観のカスタマイズが容易。FLVムービープレーヤーも標準で付属。ボックスの外も中身も真っ黒なので「シャドウボックス」と呼ばれる。WordPressプラグインも提供されており、ブログにも便利。
Fancy Zoom (jQuery) アップルのWebサイトで使われているようなズームウィンドウを、jQueryで再現したものだそうです。画像のほか、テキストやFLASHも表示できます。
VideoBox SWFファイルのみの埋め込みが可能な、ある意味特殊な奴。外観はLightbox, Slimboxと変わらない。 (レイヤーがSWFの下に隠れる現象の解決策

その他

備考

共通ライブラリを利用する
例えば、SlimBoxとVideoBoxはそれぞれ画像とSWFしか表示できない。が、両方ともmootoolsライブラリを使用しているので同時にインストールするのに2倍の容量はかからない。それぞれ使用しているmootoolsライブラリのバージョンが違っていればダブルで入れるしかないのだが。
結果、画像とSWFを表示できるようになり、Lightwindowに対抗できる。mootoolsは元から軽いライブラリなので、読み込みも楽だ。動画は全部flvにすれば対応できるだろう。

スライドショー

PC用

スクリプト名 ライブラリ 埋め込み URL
Gallerific jQuery Javascript x2, CSS x1 公式サイト
Featured Content Slider v2.4 独自 Javascript x1, CSS x1 公式サイト
SmoothGallery 2.1dev MooTools Javascript x2, CSS x1 公式サイト
Easy Slider 1.5 jQuery Javascript x2, CSS x1 公式サイト
A Simple jQuery Slideshow jQuery Javascript x1, CSS x1 公式サイト
  1. Nivo Slider:エフェクト多数、アニメーションもスムーズ。jQuery使用
  2. simpleSli.de: 手動で動かすタイプのコンテンツスライダー。jQuery使用
  3. CrossSlide: 設定項目が多いが、トランジションを自由に設定できる。jQuery使用
  4. sexyCycle: クリックに反応する、キビキビ動くスライダー。jQueryとjQuery Easing Plugin使用
  5. Choco-Slider: 容量7KBの軽量スライダー。jQuery使用。自動再生対応。切り替えエフェクトは3種類。
  6. Cycle2: マークアップが簡単、jQuery使用。レスポンシブWeb対応。
  7. Tiny Circleslider: iPodのクリックホイールのように○をグルグル回すことで画像をスライドさせるプラグイン。自動再生、回転位置スナップ、ランダム再生可能。

モバイル用

  • PhotoSwipe: PC、タブレット、スマートフォンに対応したスワイプ可能なイメージギャラリー。jQuery、jQuery Mobileに対応。

まとめ

モバイル

フレームワーク

    • jQueryを読み込んで使用するライブラリ。対応機種はこの中で最多の部類。
    • JQM Gallery:jQuery Mobileを使ったサイトのギャラリー
    • jquery-ui-map:jQuery、jQuery UI、jQuery Mobileに対応したGoogle Maps v3埋め込み用のプラグイン。紹介記事
    • モバイル市場最軽量のフレームワーク。jQueryとは関係ないが、シンタックスが似ている。WebKitブラウザに最適化されており、スクリプトもなるべくWebKitエンジンを使うようにしている。
    • jQuery MobileのZepto.js版。jqmより軽量だが、機能がよく知られていない。
    • iPhoneアプリと同じレイアウト、同じ動きをするスクリプト。
    • HTML5ベースのモバイル・タッチデバイス用フレームワーク。
    • iPhone外観に最適化されたHTML5ベースのフレームワーク。

まとめ

レイアウト改変

ニュースティッカー

ブラウザ互換性向上

    • ブラウザにどの機能があるか・ないか、できるか・できないかを判断してくれるスクリプト。機能がサポートされていない場合は、無い用の条件分岐を設定できる。
    • CSS3の機能:border-radius, box-shadow, border-image, 複数background, グラデーション、rgba,をIE9未満で使えるようになるスクリプト。
    • CSS3セレクターをIE6,7,8で使えるようになるスクリプト。JSライブラリと併用して使用する(jQueryやDOMAssistant等を自前で用意する必要がある)

FLASH埋め込み

SWFObject

    • SWFファイルをAdobeのやり方よりシンプルに、かつwebスタンダードにあった方法でHTMLに埋め込むことができる。FLASHのバージョンが古い場合にも対応できて便利。
    • メディア:SWFのみ
    • 埋め込み:Javascript x1
    • 上記のアップグレード版。1.5に比べ、複雑化していてちょっと実用できない。でもずっといい?らしい。

jQuery Flash Plugin

jQuery Flash Plugin (→URL)
<embed>タグとjQueryを組み合わせた埋め込み。どういうメリットがあるのかが分からない。

RSSリーダー

  • jFeed: JavaScript jQuery RSS/ATOM feed parser plugin URL
    • RSS 0.91, 0.92, 1.0, 2.0, Atom 1.0のフィードを読み取るプラグイン。
  • Google AJAX Feed API URL
    • Atom 1.0,Atom 0.3,RSS 2.0,RSS 1.0,RSS 0.94,RSS 0.93,RSS 0.92,RSS 0.91,RSS 0.9に対応。jFeedよりも多くのフィードアイテムを取得可能。

Twitter

日付

ピッカー

    • jQuery UIのdatepickerに代わるプラグイン。
    • ライブラリに依存しない、日付選択プラグイン。スッキリとしたデザインで軽量。
    • jQuery UIのdatepickerに時間指定を付加する。使用時にはjQuery、jQuery UIのJSファイルは当然必須。
    • Twitter Bootstrapの外観に合わせたdatepickerで、日時処理のライブラリにDateJSを使用している。

ライブラリ

    • ライブラリ非依存。日付を操作するライブラリ。日時をtimestampに変換して、差が何秒か等が必要なときに重宝する。
    • Dateオブジェクトの呼び出しをまとめたライブラリ。必要…か?

カレンダー

    • jQueryで、Googleカレンダーっぽいものを作れるようになるプラグイン。

視覚化

    • %や割合をダイヤルで表示するプラグイン。canvasを使用するのでHTML5対応ブラウザ必須。jQuery 1.7.0+
    • jQuery Knobと似ているが、外観のバリエーションが異なり、数値に単位も挿入できる。jQuery 1.7.2+
    • ドラッグ&ドロップ可能な組織図が作れる。jQuery 1.7.1+

グラフ

    • jQueryベースのグラフライブラリ。エフェクトによって別途プラグインを読み込む。カスタマイズオプション最多。
    • Google Analyticsでおなじみ、Google製グラフライブラリ。
    • グラフプラグイン「Raphael」ベースの線グラフ専用ライブラリ。
    • 円グラフの進捗度を、faviconで表示してくれるプラグイン。

まとめ

地図

グーグルマップがAPI制限を発表したので、他のマップも検討してみようと思う。(参照リンク

Google Maps

プラグイン ライブラリ マーカー エリア指定
gMap jQuery O
bMap jQuery O O
GMAP3 jQuery O O

プレゼンツール

    • GoogleのI/Oカンファレンスで使われたHTML5製プレゼンツール。
    • 左右矢印キーで移動、escキーで一覧表示、数字キー+Enterで直接そのスライドに移動。シンタックスハイライトも使えるので、コード表示に便利!
    • 国産HTMLプレゼンツール。日本でのプレゼンに向いた機能がついて(そう)。
    • スライド内表示順序も指定できるツール。

オーディオプレーヤ

    • HTML5のaudioタグを使ってプレーヤーを表示。HTML5非対応ブラウザではFlash Playerに切り替わる。ボリューム調整ができないのが難点。

音楽

    • an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG.
    • a JavaScript Library that allows you to embedd music notation and guitar tablatures to your websites.

画像プリロード等

    • Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

アニメーション

スクロール

通知

    • JSの標準アラートを、細長い通知バーとして表示するプラグイン。位置を上下左右、またはそれらを組み合わせることも可能(Topright、Bottomleft等)。1方向につき1つのJSファイルを読み込む必要があるのが難点。

まとめ

モーダルウィンドウ

シンタックスハイライト

  • GeSHi:Generic Syntax Highlighter:DokuWikiで使用されているハイライター。<?php ?>表記をサポートしている。177言語に対応。見た目ちょっとイマイチ。JSではなくPHPでできたハイライター。
    • 表記方法(実際は</code>で終わります)
      <code php><?php echo "Hello, World!"; ?>
  • SyntaxHighlighter:Googleのシンタックスハイライトからちょっと色を抜いた印象。<?php ?>表記が使用不可。主要言語に対応。
    • 表記方法
      <pre class="brush:php">echo "Hello, World!";</pre>
  • Snippet::jQuery Syntax Highlighter:↑のSyntaxHighlighterのjQuery改良版。15言語に対応、テーマは39種類。jQueryを含んだJSを2コ、CSSを1コ読み込んで使う。
    • 表記方法
      <pre><?php echo 'Hello, World!'; ?></pre>

WYSIWYGエディタ

  • CodeMirror:左の画面のコードを修正すると、右の画面でリアルタイムに反映される。コーディング検証サイトでうまく活用できそうだ。

まとめ

文字・テキスト

    • 日本語を縦書きに変換するJS。通常スクロールボタンで左右スクロール、ダブルクリックで横書きに戻るなど、芸が細かい。また、普通のHTMLタグの縦バージョンが数多く用意されている。
    • 何文字目に三点リーダや「続きを読む」を挿入する方法
    • 雑誌風のレイアウトにアレンジしてくれるJS。タイトル一覧の左サイドバー付き。
    • 新聞のように、段落を横にならべるJS。pタグの他に、liタグにも適用できる。

ナビゲーション

    • ツリー状のサイドメニューを生成するプラグイン。

ページ送り

    • 本のようにペラペラめくれるスライダーが作れるプラグイン。洋書を想定した作りなので、マンガや縦書きの場合逆順で作る必要がある。
    • 本のようなページめくりが可能になるプラグイン。PC、タブレット、スマートフォンでも機能する。HTML5+jQuery環境下で動作。

入力フォーム

まとめ

jQuery

まとめ

  • jQueryのプラグイン33+1選 (URL)
    • 使えそうなスクリプトのリスト。最後の「TOPに戻る」は要検討。
  • jQuery Style (URL)
    • jQueryをフル活用したサイトを紹介している。少数ながら、チュートリアルも載せてある。
  • 15+ Excellent jQuery Plugins To Enhance HTML Forms (URL)
    • チェックボックスのカスタマイズ、カレンダーによる日付セレクター、テキストエディタ、カラーピッカーなど。
  • 35 Fresh and Useful jQuery Plugins URL
    • ナビゲーション、日付/日時ピッカー、画像表示、タブ切替、マークアップエディタなど。
    • 単純な日付ピッカーから、具体的な予定が書き込めるタイプまで。

jQuery UI

    • jQuery UIを実装したウィジェット30個のセット。ライセンスはGPL・商用か選べる。

時計

その他/未分類

    • デバイスのスペック情報を表示させる
    • 日付、任意入力にも対応したスライダー。jQuery UIよりも軽くて良い。
    • 2011年に廃止されたYoutubeのchannel embedをjquery+iframeである程度再現。iOSデバイスにはhtml5プレーヤーが表示される。
    • Web上のソースコードをきれいに表示。
    • Javascriptのみで動かすアナログ時計。世界時計など、高度な設定も可能。
    • 背景画像がフェードイン・フェードアウトで切り替わる。ウィンドウサイズで画像の拡大・縮小もできる。
    • ☆評価ができるようになるプラグイン。どうやってデータを渡すかは不明。
    • 画像にヌード描写が含まれているかをチェックするプラグイン。子供用フィルタリングサイトなどに活用できる?
    • 指定したものを屏風のようにパタパタと畳んだり、紙のようにペラペラさせたりできるプラグイン。ライブラリ非依存、CSS3の3D transformを使う為webkitブラウザ推奨。
1)
現在は開発が終了している
links/jscripts.txt · Last modified: 2016/05/23 15:44 by Sohei Arakawa