embed.js - 各種サイトの埋め込み表示をサポート MOONGIFT
今は数多くのサービスが埋め込み表示に対応しています。外部サイトに埋め込んでもらうことで閲覧数を増やしたり、結果としてバイラルしていくきっかけになります。とはいえ、各サイトによって埋め込み方が違うのでいちいち覚えるのが面倒です。 そこで使ってみたいのがembed.jsです。embed.jsを読み込むだけで多くのサイトの埋め込みを自動処理してくれます。 embed.jsの使い方 Markdownコンテンツの埋め込み。HTMLにしてくれますし、絵文字も展開しています。 Instagram。 Flickr。 Googleマップ。 SoundCloud。 ビデオタグ Video.jsのサポート。 Vine。 YouTube。 Twitter。 GitHubのGist。 CodePen。 このようにembed.jsを使えば簡単にコンテンツの埋め込み表示ができるようになります。サイトによっては埋め込むコ
Webアプリケーション開発に使えるJavaScriptフレームワーク·ComponentJS MOONGIFT
ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
JavaScriptでJavaやPHPのようなオブジェクト指向プログラミングを可能にするライブラリ「dejavu」 | OSDN Magazine
ポルトガルのオープンソースプロジェクトインキュベーター、Indigo UnitedがJavaScriptでPHPやJavaのようなオブジェクト指向プログラミングを可能にするためのライブラリ「dejavu」を公開している。PHPやJavaでのオブジェクト指向プログラミングに慣れ親しんだ開発者がJavaScriptに移るのを支援するという。 JavaScriptのプロトタイプ型継承はパワフルで柔軟性があるが、オブジェクト指向プログラミングを利用する開発者にとって移行は簡単ではないという問題に着目、dejavuはこれを解決するためのJavaScriptライブラリとなる。 dejavuを利用することで、JavaScriptでクラス機構やインターフェイス機構、Mixin、静的メンバ、PrivateとProtectedメンバ、定数、コンテキストバインド、メソッド署名検証などが利用可能となる。requi
オフラインになったら操作を防ぎ通知を出すJavaScriptライブラリ·Heyoffline.js MOONGIFT
Heyoffline.jsはネットワークのオンライン/オフラインをキャッチしてアクションを実行できるJavaScriptライブラリです。 Webアプリケーションの弱点はネットワークが閉ざされると使えなくなることです。そこで致命的なエラーになる前にネットワーク状態を感知して処理できるようにしましょう。そのために使えるのがHeyoffline.jsです。 オンラインです。 オフラインにすると指定したアクションを実行できます。 Heyoffline.jsでは入力系フィールドを指定して編集無効にしたりできます。またモーダルウィンドウを表示して現在オフラインである旨も通知できます。これにより不要なアクションを防げるでしょう。 Heyoffline.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 光ファイバーやADSLの普及によって
EclipseのJavaScript環境（JSDT）を快適に使う方法 - susumuis Info
今日ますます重要となってきているプログラミング言語JavaScriptの開発環境として、WebStormやIntelliJ IDEAの評判が良いですが、Eclipseを使わざるを得ない状況ことも多いと思います。今回Eclipseで快適にJavaScript開発を行う環境をどのように構築したらよいか、試行錯誤をしたので、結果を報告します。人によっては違う結果になるかもしれませんが、もしよければ参考にしていただければと思います。 Eclipseプラグインは何を選択するべきか 2011年7月現在、Eclipseプラグインとして、JavaScriptの開発環境を提供しているものは、以下のようにいろいろあります。 JSDT 標準のJavaScript開発環境です。WSTに搭載されているので、J2EE版Eclipseなどをインストールすれば最初についています。印象として、可能なかぎりJava環境のJD
縦書き文庫の開発日誌 カンタン！縦書きブログの作り方
Google Code に縦書き文庫の組版エンジン、涅槃（ねはん）を公開しました。 これを使えば（FC2のようにJavaScriptが使用可能で、テンプレートが編集できるブログなら）誰でも簡単に縦書きブログを作ることが出来るので、ここにやり方を書いておきます。 step1 まずはこちらから最新のソース（nehan-1.0.zip）をダウンロードして解凍し、中のnehan.jsとimgフォルダに入っている画像全てをサーバーにアップロードします。ここでは仮に、 nehan.js が /js/nehan.jsにアップされ、 charフォルダ内の文字画像がパス /imgの中にアップロードされた、 と仮定します。 step2 あとはブログのテンプレートにて</head> の直前に次のような黒魔術を刻み込めば準備は完了です。 <script charset="utf-8" type="te
縦書き文庫の開発日誌 縦書き、横書き自由自在！ あなたのブログをページ送りで表示させる最も簡単な方法
画像や見出しのような目のアンカーがあるテキストならともかく、長文がノッペリと続くようなコンテンツの場合、スクロールって目が疲れませんか。特に小説とか。少なくとも僕は駄目です。 そこで、js製組版エンジンのnehan3です。ページ送りで表示できるビューアーがサクっと表示できます。 セットアップは簡単。次のコードを「</head>」の直前に貼り付けるだけ！ <link charset="utf-8" rel="stylesheet" type="text/css" href="http://nehan.googlecode.com/hg/nehan3.css" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.
Google製のクライアントサイド、JavaScript製テンプレートエンジン·JsTemplate MOONGIFT
JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev
スマートフォンに特化することでjQuery API互換ながら5KB以下なJavaScriptライブラリ·Zepto.js MOONGIFT
Zepto.jsはjQuery API互換のスマートフォンブラウザ向けJavaScriptライブラリ。 Zepto.jsはJavaScript製のオープンソース・ソフトウェア。最近のWebシステム開発ではjQueryを使わないことがなくなったとさえ言えるかもしれない。それくらい頼り切ってしまっている。普通にJavaScriptを書くのが苦しくなるくらいだ。 サンプル。大抵の機能はデスクトップブラウザにも対応。 そのためスマートフォン向けのサイトでもjQueryを使ってしまう。だがデスクトップのように高速な回線でない場合もあるため、jQueryの90KBくらいのサイズは非常に重たいのだ。そこで使ってみたいのがjQuery API互換の軽量ライブラリであるZepto.jsだ。 Zepto.jsは何と5KB以下で提供されている。eachやmap、$を使ったDOMアクセス、Ajax、findなど基
Closure Library のサンプル目次を作りました - WebOS Goodies
最近、 JavaScript のプログラミングでは Closure Library を使うようになってきました。やはりこれひとつでほとんどの機能を賄えて、アプリケーションの構造化も素直に行えるのがいいですね。 Closure Library の機能を把握するには、豊富に用意されているサンプルデモを参照するのが一番の近道なのですが、リファレンスページにファイルのリストがあるだけで、自分が使いたい機能のサンプルがどれなのか、探すのに毎回苦労します。 そこで、この状況を少しでも改善するべく、サンプルをカテゴリ分けしてみました。それぞれの内容も簡単にコメントしてあるので、目的のサンプルを見つけるのがだいぶ楽になると思います。 Closure Library のお供に、ぜひご活用ください。 イベント events.html - イベントオブジェクトの内容表示など。 eventtarget.html
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
初心者にも分かる Node.js と WebSocket についての解釈まとめ
解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使
HTML5とJavaScriptで作られた自動車の進化シミュレーターがかわいい | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー 自動車の進化シミュレーターを見つけました。いわゆる遺伝的アルゴリズムを使って，二輪車の形状を突然変異させながら，でこぼこ道をスイスイ走れるような形状に進化させてゆくシミュレーター。突然変異率などを変えて，進化の過程を目で確認できるようになっている。 HTML5(Canvas)とJavaScriptを使っていて，ブラウザだけで動くよう作られている(Chrome推奨，重いけどiPhoneやAndroidでも動く)。進化の過程でいろいろな形の車ができておもしろい。最初からコケて走らないヤツ，平らな道では早く走るけどでこぼこ道で動かなくなるヤツ，遅いけど悪路に強いヤツ。見ていると進化する車を応
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
/画像・HTMLポップアップ表示
公式サイト ライブラリを使ったデモ ライセンス:MITライセンス prototype.js/script.aculo.usを使った同一ページ内ダイアログ作成ライブラリ
jQuery UIのインタラクションを使ってみよう
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ソートサンプル</title> <style type="text/css"> .square { width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javasc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript力をほんの少し上げる3個のTips
はてなブログ | 無料ブログを作成しよう
nehan - Project Hosting on Google Code
IDEA * IDEA