遅いブログパーツを高速表示する方法
ブログパーツの表示が遅いと、ページ全体の描画が止まってしまいますよね。 ブログパーツを「非同期化」してしまえば、ストレス無くページが表示されるようになりますよ。 非同期化とは、ページの一部分を、全体のページから独立して描画させる方法です。 方法はいろいろあるのですが、今回はJavascriptの「setTimeout()」関数を利用しました。 setTimeout()は、メインの描画とは別に、指定した時間後に命令を実行する関数です。時間を0にすれば、非同期で動作させることが可能です。 ブログパーツは、主に3つの形に分けることができます。各々の形ごとに、高速化する方法を紹介します。 ●タイプ0 <iframe src=”http://hogehoge.com/blogparts.cgi”></iframe> iFrameのタイプは、すでに非同期化されているため、特に対策は必要ありません。 ●
リアルな雨粒を再現するJavaScript「rainyday.js」 | ソフトアンテナ
「rainyday.js」は窓ガラスに付着する雨粒をリアルに再現するJavaScript(作成者のブログ、Hacker News)。 雨粒の大きさとか、流れ落ちる速さなどを自由に調節することができるようで結構リアルに表現されています。効果の呼び出し方は次のようにengineを初期化してrain()メソッドを呼び出すだけです。 engine.rain([ engine.preset(3, 3, 0.88), engine.preset(5, 5, 0.9), engine.preset(6, 2, 1), ], 100); demo1、demo2と実際に動くデモが用意されているので動かしてみてください。
iio Engine: JavaScript Game Engine for HTML5 Canvas
iio.js is a framework for HTML5 Canvas
[CSS]ソーシャルボタンのリストが蛇腹状に折り畳まれるスタイルシート
ソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。 デモページ：開いた状態 実装 外部ファイル jQueryとModernizrを</body>の上に外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> HTML 一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。 <h2 class="connect">Connect with me:</h2> <ul class
正規表現をわかりやすく視覚化してくれる『REGEXPER』 | 100SHIKI
おっと、これは便利かも。 REGEXPERを使えば、JavaScriptの正規表現をわかりやすく表現してくれる。 一見、難解な正規表現だが、これを通しても見ると「なるほど、この文字とこの文字にはされまれていて、この間は何の文字でも良いのだな」といったことがわかるようになる。 他の人のコードを読んでいて「？」となったときに試してみてもいいかもですな。
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS – @attrip
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
無料で使えるHTML5 JavaScriptゲームエンジンまとめ
HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン（ゲーム開発用のフレームワーク）が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。 本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。 Cocos2D JavaScript (http://cocos2d-javascript.org/) Crafty (http://craftyjs.com/) enchant.js (http:
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！ - Web学び
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その１ 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
Email Obfuscation via ROT13 Cipher
Email Obfuscator This easy-to-use substitution cipher encrypts via ROT13 your email addresses to avoid them getting harvested by spam-bots while keeping the mailto: feature. It rests on JavaScript and includes a pure CSS fallback. Feel free to bookmark it and share it! Email Address Type the email address you want to obfuscate. Anchor text The visible, clickable text attached to the mailto link, e
HTML5対応のユーザーインターフェイスライブラリ「Kendo UI」登場
JavaScriptでビジネスアプリケーションを開発する際に使えるユーザーインターフェイスライブラリ「Kendo UI」の正式版が公開されました。 JavaScript用のユーザーインターフェイスライブラリといえば、jQuery UIやSencha Touchなどがあります。Kendo UIもそれらと基本的に似たライブラリですが、jQueryをベースにしつつメニューやデータピッカーなどの基本的な部品だけではなく、表形式でデータを表示するグリッドやグラフなど、このライブラリだけでビジネスアプリケーションに必要な部品をカバーしている点にあるでしょう。 HTML5対応ですが、HTML5非対応のWebブラウザもサポート。GPLv3ライセンスのオープンソースと、商用利用向けの有償ライセンス（399ドル）のデュアルライセンスで提供されています。 いくつかサンプルを挙げておきます。
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
HTML5の動画上に字幕や、デザイン変更可能なツールチップをキャプションっぽく埋め込めるライブラリ・BubblesJS - かちびと.net
これはなかなか便利かも、と思っていつかの日 のために備忘録。HTML5製の動画に、字幕や デザインの変更が可能なツールチップ的なもの を埋め込めるライブラリ、BubblesJSです。応用 すればニコニコ動画のような動画コンテンツも 実装出来るんじゃないですかね？試してない ので分かりませんけど。 以前も字幕・・というかキューを入れられるライブラリ・Cuepoint JSをご紹介しました。こちらはかなり手軽に使えて良さそうでしたが、一応選択肢は欲しいところですよね。jQueryやmootoolsなど、特になにかのjsに依存することの無いライブラリです。 こんな感じでツールチップが上から落ちてきて下に流れていったり残ったままだったり。ツールチップはクリックで消すことが出来ます。普通にテキストなのでドラッグも出来ます。 デザインも思いのままです。テキストなのでドラッグも可能。 字幕っぽいのも こ
画像やフォントの埋め込みに対応。node.jsを使ったPDF作成ライブラリ·PDFKit MOONGIFT
PDFKitはnode.jsを使ったPDF作成ライブラリ。 PDFKitはnode.js/JavaScript製のオープンソース・ソフトウェア。Webアプリケーションにおいて鬼門とも言える技術がPDFではないだろうか。これまで広まっているとWebアプリケーションからPDFでデータを出力してほしいという要望が必ず出てくる。しかしそう簡単にできるものでもない。 作成されたPDF 多数のプログラミング言語向けにPDF作成ライブラリが存在する。node.jsであってもそれは変わらない。JavaScriptでPDFを生成する、PDFKitを紹介しよう。 PDFKitはテキストはもちろん、リストや画像の埋め込み、SVGのレンダリング、リンクに対応したPDF生成ライブラリだ。フォントの埋め込みに対応しているので、日本語フォントを用意すれば使えるはずだ。TrueType系のフォントが利用できる。テストのス
[開発者向け] たった数行の JavaScript コードで、Web サイトが Hotmail、Messenger、SkyDrive とつながる
[開発者向け] たった数行の JavaScript コードで、Web サイトが Hotmail、Messenger、SkyDrive とつながる ※本記事は、Inside Windows Live blog の抄訳です。 最近の開発者は必ずと言っていいほど、Facebook、Twitter、Google、Hotmail といったさまざまな Web プラットフォームをサイトに統合しています。こうした状況から、マイクロソフトは、開発者が他のプラットフォームとマイクロソフトのプラットフォームを使って、簡単に Messenger、SkyDrive、Hotmail とWeb サイトを接続できるよう尽力してきました。この目標を達成するためにマイクロソフトが重視してきた理念は以下のとおりです。 数行の JavaScript コードを記述するだけで、強力な統合を実現する。 数行のスクリプトを追加するだけで
![[開発者向け] たった数行の JavaScript コードで、Web サイトが Hotmail、Messenger、SkyDrive とつながる](https://cdn-ak-scissors.b.st-hatena.com/image/square/560787137f9e1d97dfa0df82c2cb7732cf49f34c/height=288;version=1;width=512/https%3A%2F%2Fwelovewindowslive.wordpress.com%2Fwp-content%2Fuploads%2F2011%2F07%2F0576-connect-button_5a0afdb9_thumb.png)
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
Build and implement a single sign-on solution
jobyj.in
現行ブラウザで高度な3D表現を実現するJavaScriptライブラリ「Sprite3D.js」 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
