タグ

JavaScriptとjavascriptに関するhalohalolinのブックマーク (223)

  • スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌

    QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」

    halohalolin
    halohalolin 2012/06/11
    タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントに対応できる
  • ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌

    gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

    halohalolin
    halohalolin 2012/06/04
    マップのクリック、ドラッグ時のイベントハンドラ実装/マーカー付与/ジオロケーション・ジオコーディング/マップオーバーレイ/マップ上のコンテキストメニュー実装/地図上の区画指定/目的地までのルート描画/静的な...
  • wysihtml5 - A better approach to rich text editing

    <h1>WYSIHTML5 - A better approach to rich text editing</h1> <p>wysihtml5 is an <span class="wysiwyg-color-green"><a href="https://github.com/xing/wysihtml5">open source</a></span> rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inlin

    wysihtml5 - A better approach to rich text editing
    halohalolin
    halohalolin 2012/05/30
    HTML5ベースのWYSIWYGエディタ、「Chromeなら」音声入力可能、日本語にも対応
  • JavaScriptを高速化する6つのテクニック

    Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. Thomas Fuchs氏が6 easy things you can do to improve your JavaScript runtime performanceにおいてJavaScriptの実行パフォーマンスを改善するための6つのテクニックを紹介している。Thomas Fuchs氏はscript.aculo.usの開発者であるとともにPrototypeコアチームのメンバーも務めている。またRuby on Railsでコアチームで開発を担当していたこともある。 JavaScriptエンジン

    halohalolin
    halohalolin 2012/05/28
    2009年の話、関数呼び出しを避ける、newで配列やオブジェクト生成、ループは展開、グローバル変数よりローカルにキャッシュ、先にfalseが入る可能性が高いものを先に記述、必要がないなら使わない
  • グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト! - Shinichi Nishikawa's

    グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト! 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画

    グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト! - Shinichi Nishikawa's
    halohalolin
    halohalolin 2012/05/17
    棒・線・線の下を薄く塗る線・円グラフ/IE6対応/のテーブルを元に表を描いてくれる/線グラフのY軸の範囲を指定できる/線グラフで途中の値に抜けがあっても大丈夫
  • WebSocketによるクライアント=サーバー通信(1/7):JavaScriptによるHTML5プログラミング入門 - libro

    HTML5では、クライアント=サーバー間の通信に関する技術も追加されています。それが「WebSocket」と呼ばれるものです。これにより、Webブラウザからサーバーに、JavaScriptで通信することが可能になります。 ……なんて説明すると、「えっ、今までもAjaxとかでできたはずじゃ?」と思うかも知れません。確かにAjaxを利用すれば、JavaScriptを利用してクライアント(Webブラウザ)からサーバーに通信をすることができます。しかし、Ajaxによる通信は、それほど高度なものではないのです。 Ajax通信は、単に「クライアントからサーバーにアクセスし、結果を受け取って終わり」ということしかできません。どういうことかというと、「通信を維持し続けることができない」ということなのです。中には、Cometと呼ばれる技術などのように、Ajaxを巧みに利用して通信し続けるようなものも登場して

    halohalolin
    halohalolin 2012/03/12
    WebSocketを使うとPULLは勿論、Ajax通信と異なりサーバへPUSHが可能、但しWebSocket通信用のサーバが必要
  • Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade

    A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade Overview Features Examples Documentation Download @LeafletJS GitHub Repo Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API. It is built fro

    halohalolin
    halohalolin 2012/03/09
    OpenStreetMapをホームページなどに組み込めるJavaScriptライブラリの一つ、SlippyMapよりもズーム処理がアニメーションであったりデザインがよりモダン、iOSやAndroidも考慮しているらしい
  • [JS]jQueryのプラグイン100選 -2011年総集編

    2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連

    halohalolin
    halohalolin 2011/12/13
    ...画像配置・キャプション関連/コンテンツスライダー・カルーセル関連/タブ関連/ナビゲーション関連/レイアウト関連/パネル・ボックス関連/ツールチップ・ティッカー関連/アニメーション関連/エフェクト関連...
  • 無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT

    JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト

    halohalolin
    halohalolin 2011/11/29
    JavaScriptだけでZipファイルを作ってしまうので、貧弱なWebサーバ上でもZip圧縮が提供できそう-具体例がパッと出てこないが…アップロード用にも使えるなら幅が広がりそう。
  • 注目!サーバサイドからjQueryを使ってDOM操作·nodeQuery MOONGIFT

    nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと

    halohalolin
    halohalolin 2011/11/25
    nodeQueryを使うとサーバサイドとクライアントサイドの区別がなくなったようなコーディングができるようになります。node.js/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
  • FitText - A plugin for inflating web type

    A jQuery plugin for inflating web type Download on Github FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

    halohalolin
    halohalolin 2011/05/14
    スマートフォンからPCまで、画面幅に合わせてフォントサイズを自動調節してくれるjQuery Pluginらしい。
  • jQuery Mobile 1.1.0 日本語リファレンス

    Bbfstoto adalah situs slot online peluang maxwin tertinggi yang bisa didapatkan dari slot gacor terbaru bergaransi. Kemenangan luar bisa dan mudah menjadi daya tarik bermain pada situs slot terbaru. Didukung dengan mekanisme peluang lebih besar hingga 70% berbanding 30% semua bisa merasakan withdraw besar. Awal mula munculnya judi slot hanya untuk kalangan menengah keatas, namun era sudah berubah

    halohalolin
    halohalolin 2011/04/09
    jQueryのモバイル環境へのアプローチは、総じてシンプルなものです。最初の一行に JavaScript を書けば、おおよそ流通しているWebブラウザやタブレットに対応したユーザインターフェースを提供できるようになる、とい...
  • [JS]jQueryのプラグイン100選 -2010年総集編

    2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連

    halohalolin
    halohalolin 2010/12/21
    コンテンツスライダー・カルーセル関連/ギャラリー・画像拡大関連/ナビゲーション関連/タブ関連/パネル・ボックス関連/ツールチップ関連/レイアウト関連/背景画像関連/その他UI関連/アニメーション関連/スクロール…
  • jQueryを使ったタブメニューの実装サンプルまとめ

    **追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日! 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip

    jQueryを使ったタブメニューの実装サンプルまとめ
    halohalolin
    halohalolin 2010/11/28
    jQueryを利用したタブメニュー。切り替え時にフェードインやスクロール等のアニメーションを設定する事が出来る
  • iOS4.2のSafariから追加された加速度センサーでシェイクジェスチャを作る

    iOS4.2からSafariで加速度センサーを使うことができるようになりました。 モンハンの予約を逃していつ買えるのかとヤキモキしているME課の比留間です、こんにちわ。 さて、つい先日アップデートされたiOS4.2。このアップデートでMobile Safariから加速度センサーをJavaScript経由で利用することができるようになりました。使い方は簡単で、以下のようにするだけで加速度の値を取得することができます。 JavaScriptから加速度センサーにアクセスする window.ondevicemotion = function(event) { //event.accelerationIncludingGravity.x //event.accelerationIncludingGravity.y //event.accelerationIncludingGravity.z } これ

    halohalolin
    halohalolin 2010/11/28
    入力フォームの入力キャンセルやくじ引きの演出等に使えそう。あとゲームか。
  • ブックマークレットPaste Titleで、ブログをちょびっとだけ素早く更新しよう! : つねづね思ふこと 〜 ゲームやアニメの紹介を中心 に、あと気がついたときにプログラムネタも書いてます

    halohalolin
    halohalolin 2010/11/14
    ブックマークレットPaste Titleで、ブログをちょびっとだけ素早く更新しよう! / Paste Titleは、今見ているホームページのURLを自動的に<a>タグで囲んでくれるブックマークレットです!
  • DEVShed

    halohalolin
    halohalolin 2010/11/03
    jQueryで、PHPなどで加工された内容をtextarea内に挿入するにはloadメソッドを使うのではなく、$.get(htmlBannerUrl, function(data){ $('textarea').val(data); }); とgetメソッドを用いる
  • jQuery.jsを使ってhtmlを外部読み込み

    htmlの作成時に各ファイルで共通している部分がありますね。 ・ヘッダとか ・フッタとか ・グローバルナビとか そんな時、どうしてますか? 1.各ファイルに同じ記述をしてますか?(変更掛かったらめんどくさいですね) 2.SSI(サーバーサイドインクルード)してますか?(できればいいけどちょっぴり敷居が高い?) 3.avascriptでdocument.writeつかってますか?(ソースが長いとめんどくさいですね) ざっくりリストアップすると以上のような方法が考えられます。 僕も上記のどれかをケースバイケースで使ってました。 そこにもうひとつ選択肢を追加します。 jQuery.jsを使って外部のhtmlファイルをまるごとインクルードしちゃいましょう。 方法 1.何はともあれjQuery.jsをダウンロード http://jquery.com/ 2.htmlのheader要素内で読み込む <s

    jQuery.jsを使ってhtmlを外部読み込み
    halohalolin
    halohalolin 2010/10/24
    jQuery.jsのloadを用いるとSSIのように外部ファイルを読み込ませる事が出来る。サーバへの負担も少なくてすみそう。
  • 広告等に使えそうなjQueryプラグインいろいろ - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step

    halohalolin
    halohalolin 2010/10/21
    省スペース内で画像を切り替える/省スペースに置けるギャラリー/シンプルなカルーセル/端にめくり/クリックでひっくり返る/フリップ/onmouseで別画像・オーバーレイ/テキスト連続表示/LPO/RSS一行見出し
  • ついに iPhone Safari ブラウザから位置情報を取得できるようになります - Cirius Lab. ブログ

    「昔から自分のナニのサイズが小さいのがコンプレックスになっています」 コンプレックスになったきっかけは中学の時の修学旅行です。 それまで特に気にならなかったのですが、お風呂の時間に友人のを見て、自分が小さい方なことに気が付きました。 それからは恥ずかしく思うように。 それから10年近く経ちましたが、特にサイズは変わっていないです。 大人になってふと思ったんです。 コンプレックスを解消する方法って無いのかなと。 そして調べてみたら、最近は色々な方法があることを知りました。 特に気になったのは【凝縮黒ウコンDEX】という増大サプリメントです。 全体的に評価も高くて、レビューを読んでいてもかなり期待できるなと思いました。 ですが初めてのことなので、自分に効果があるのかという不安もあります。 なので凝縮黒ウコンDEXについて詳しく調べてみたいなと。 調べ尽くして、使いたいという気持ちが強ければ注文

    ついに iPhone Safari ブラウザから位置情報を取得できるようになります - Cirius Lab. ブログ
    halohalolin
    halohalolin 2010/10/14
    iPhone Safariに代表される(社内LANで接続されたWindows用Firefoxでも精度はともかく動作は確認)位置情報が取得できるブラウザからJavaScriptを使用して取得するサンプルプログラム