jQuery1.4でタブを動的に作成するチュートリアル

0

dynamic_tabs
jQueryでタブを動的に作成するチュートリアルDynamic tabs using jQuery – why and how to create it のご紹介。

jQueryでiGoogleのように自由にタブの追加や削除を行う事が可能になります。
実際のデモを見ていただくと動きがわかると思います。

以下のようなhtmlとJavaScriptを用意するだけで動作するようです。


<script>
$("#documents a").click(function() {
    addTab($(this));
});
function addTab(link) {
    // hide other tabs
    $("#tabs li").removeClass("current");
    $("#content p").hide();

    // add new tab and related content
    $("#tabs").append("
  • " + $(link).html() + "x
  • "); $("#content").append("

    " + $(link).attr("title") + " "); // set the newly added tab as curren $("#" + $(link).attr("rel") + "_content").show(); } </script>

    ダイナミックなページを作成したい方は、使ってみてはいかがでしょうか。

    編集可能なロゴデザインを無料でダウンロードできるサイト「Logoinstant」

    0

    logoinstant
    Logoinstantはロゴデザインを無料でダウンロードできるサイトです。ほとんどのファイル形式がPSDやAIファイルになっているため編集する事が可能になっています。

    クオリティの高い素材

    気になったロゴをいくつか紹介。

    ionizer-493x328

    monkeyrule-493x328

    diagblock-493x328

    フリーにもかかわらずクオリティの高い作品が探せば結構ありました。
    個人使用、商用利用もOKとの事。
    ロゴ作成にインスピレーションを得たい方、いかがでしょうか。

    Tooltipを表示できる軽量のjQueryプラグイン「TipTip」

    0

    tiptip
    TipTipはシンプルでスタイリッシュなToolTipを表示する事ができるjQueryのプラグインです。

    要素にマウスオーバーした際にToolTipを表示する事ができ、表示位置を上下左右から指定する事もできるようです。

    ツールチップのデザインはすべてCSSで指定されているようですので、カスタマイズも簡単にできそうです。

    詳しくは以下

    文章を解析して自動でGoogle Mapにアイコンを追加してくれるJavaScript「addmap.js」

    0

    analyse_text
    addmap.jsはコンテンツの中の文章を自動解析して地名を見つけるとGoogle Map上にピンを表示してくれるスクリプトです。

    使い方

    使い方は非常に簡単で、JavaScriptを読み込んだ後にGoogle MapのAPIキーを指定するだけになります。

    <script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
    </script>
    addmap.config.mapkey = 'YOUR_API_KEY';
    addmap.analyse('content');
    </script>
    

    日本語もOK!?

    auto_add_map
    ためしに日本語を設定してみた所、問題なく動作しました。ただし「日本語のみ」ではうまく動作しなかったため英語が含まれている必要があるようです。

    アイデアが面白いので,使い方によっては良いかもしれません。

    WordPressでショッピングカートが作れるプラグイン「GetShopped」

    2

    shopping_plugin
    GetShoppedはWordPressでe-commerceサイトを作る事ができるプラグインです。

    e-commerceサイトをオープンソースで構築するにはEC-CUBEなどがありますが、カスタマイズして使うには学習コストが高いなどの難点がありました。

    しかし、使いなれたWordPressでショッピングカートを作れるとなると構築もスムーズに行くのではないでしょうか。

    WordPressとWordPress MUで動作するようです。

    詳しくは以下

    ボタンやナビゲーションに使えるフリーのアイコンセット

    0

    medialoot-com

    フリーのアイコンをPSD/PNG形式でダウンロードできるFreebie: Massive Web UI & Button Setというエントリーのご紹介。

    テキストボックスやボタン、ドロップダウンメニュー、ローディングバーなど、UIに関するものに力を入れているようです。

    ファイルをダウンロードすると、3つのカラーパターンのファイルが含まれているため、サイトにあったものを使う事が可能になってます。

    個人利用、商用利用ともにOKですがアイコン単体だけの販売などはやめて欲しいとの事です。

    WEBサーバーのファイルを管理できるWordPressプラグイン「AjaXplorer」

    0

    ajaxplorer
    AjaXplorerはFTP接続すること無く、WEBサーバー上のファイルを管理する事ができるツールです。PHPとJavaScriptを使用することでエクスプローラー風の画面を表示し、自由にファイルを操作することが可能です。

    特徴的なのはGoogle Analyticsを使用してどのファイルがダウンロードされたかなどの統計が取れることです。
    スタンドアロンなPHPスクリプトも用意されているようですが、WordPressに組み込むことも可能になっているため、初心者でも簡単に使用することが可能になってます。

    ファイルはサムネイル表示や削除など、通常のエクスプローラーと変わらない操作を指定することが可能です。
    データベースは特に使用していないとの事なので、PHP5が使用可能であれば動作するようです。

    ユーザーにサーバーのファイルを操作させる場合に使用してみるのはいかがでしょうか。

    FlashDevelopを超えるかも!Mac用のActionScriptエディタ「IntelliJIDEA 9」

    2

    intellijidea9

    ※コメントにてご指摘いただき、オープンソース版はActionScriptによるプロジェクト作成が出来ないとの事。利用には注意してください。
    ※有償版($249)ではFlex SDKによる開発が出来ることを確認しました。

    今までMacでActionScriptを開発されてきた方に朗報です。ついにきました。オープンソースのMac用ActionScriptエディターIntelliJIDEA 9の登場です。

    今までMacでActionScriptを開発するにはVMWareを使用してWindowsでFlashDevelopを使用していたのですが、これからはMacオンリーで開発できるかもしれません。

    コード保管やプロジェクトのバージョン管理などが、これだけでできるようです。

    今ちょっとMac環境で確認できないのでご紹介だけですが、もし時間がある方はダウンロードして見てみてください。

    2010/01/31追記

    Flash Builderのプロジェクトファイルもインポートできるとの事。
    IntelliJ IDEA 9 What’s New

    ダウンロードされて見た方、ぜひコメントで共有してください!

    iPadでFlashサイトを開いた悲惨な画面

    0

    APPLE IPAD
    iPadがちまたでは話題ですね。かくいう私も喉から手がでるほど欲しいのですが、iPhone同様Flashは表示できないとの事。
    では、フルフラッシュサイトをiPadで表示したらどうなるのか。そんな悲惨な画面が話題になっていました。

    詳しくは以下

    クロスドメインの制約を外す事ができるproxy「Simple PHP Proxy」

    2

    simplephpproxy

    JavaScriptやActionScriptで外部のXMLを読み込む場合などにクロスドメインの制約で読み込めない場合があります。
    Flashの場合は外部サイトにcrossdomain.xmlを設置してもらったりする、JavaScriptの場合はJSONPを使用するなど対応方法はありますが、全ての案件に対応可能なわけではないと思います。

    そんな外部との連携でどうしようもできない時に使用したいのが今回ご紹介するSimple PHP Proxyです。
    これは外部サイトのデータをPHPで取得する事によって、自ドメイン内でデータを表示する事ができるproxyシステムです。

    外部サイトにアクセスする際には以下のオプションを指定できるようです。

    • クッキーを送信
    • Userエージェントを送信
    • GETかポストか
    • ヘッダーを送信

    使い方

    使い方は簡単です。
    設置したPHPファイルに「url」というクエリーを追加するだけになります。

    例えば以下のような感じです。

    http://設置したURL/ba-simple-proxy.php?url=http://blog.verygoodtown.com/

    Cookieを送信する場合は「send_cookies」という値を1に設定します。

    http://設置したURL/ba-simple-proxy.php?url=http://blog.verygoodtown.com/&send_cookies=1

    proxyを設置されたい方は検討してみてはいかがでしょうか。