既存のHTMLをMarkdownに変換·reMarked.js MOONGIFT
reMarked.jsはHTMLコンテンツをMarkdown記法に変換するJavaScriptライブラリです。 ライトなマークアップ言語として広く使われるようになっているのがMarkdownです。とは言え新規ドキュメントはよくとも既存のドキュメントの変換は面倒で、利用を控えてしまっているかも知れません。そこで使ってみたいのがreMarked.jsです。 こちらは標準のページ。普通のHTMLです。 reMark it!ボタンを押すとMarkdown記法に変換されます。 他のページでも… 変換されます。dlはHTMLのままになっています。 reMarked.jsを使えば既存のHTMLコンテンツをMarkdownに変換できます。つまり他のフォーマットから乗り換える場合も、まずHTMLに変換してからMarkdownに変換すれば良いということです。これからMarkdownを使おうという方に便利ではな
tmlib.js でモーダルウィンドウを作ってみた | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます. 今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました. サンプルは jsdo.it で作成しております. Table of contents サンプルについて ソースコードの解説 DOM 要素をクエリで取得 イベントリスナをさくっと登録! 一度しか実行しないイベントを登録する スタイルをサクッとセット 属性をサクッとセット tmlib.js hackthon #1 やります! サンプルについて 左上のボタンを押すとモーダルウィンドウが表示さ
enchant.jsでゲームを作る7つの利点と5つの注意点
enchant.jsとは―― 2Dゲームに特化したHTML5＋JavaScriptライブラリ 「enchant.js」とは、ユビキタスエンターテインメント（UEI）が2011年4月にリリースした、HTML5＋JavaScriptベースのゲームエンジンです。enchant.jsはオープンソースでGitHubでソースコードを公開しています。ライセンスは、MITライセンス／GPL2のデュアルライセンスです。もともとはプログラミング学習を目的として開発されましたが、現在では世界中で多く利用されているHTML5向けゲームエンジンとなりました（2012年6月UEI調べ）。 実際に活用された事例としては、サントリータウンの会員コンテンツであるFlashミニゲームが、enchant.jsを用いてHTML＋JavaScriptに組み直されました。これはiPhoneなどのFlash非対応端末からでも楽しめるよ
[動画で検証]たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJSが重すぎた！ | A!@attrip
[動画で検証]たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJSが重すぎた！
HTML5によるWebカメラの導入をサポートするjQueryプラグイン・Photobooth.js - かちびと.net
HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。 自分自身がWebカメラに対応したデバイスを現在手元に持ってないので動作テストしてないです。あとで検証しますが、現時点ではあくまで備忘録ですのでその程度の記事という事でご了承下さい。 当方の端末では対応して無いのでこのようにエラーが表示されてしまいますが・・編集も可能と言うのは凄いです。 実際はこのようになると思います。 getUserMediaに対応したブラウザならJavaScriptでWebカメラにアクセス可能です。マークアップはvideoとcanvasで実装出来ると思いますが、Photobooth.jsは、+編集が出来ます。 ご興味のあるかたは是非試してみてはいかがでしょうか。尚、実装テストしていないので詳細は割愛いたします。正
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
JavaScript製のショッピングカートシステム・simpleCart(js)
JSだけで作れるショッピングカート システム・simpleCart(js)のご紹介。 作れる、と書いてますけどまだ触って 無いです。便利そうだったので備忘録 的に記事にして見ます。簡単なもの ならこういうライトなもので済ませ たいですね・・ 時間が無くてデモを少し触っただけなのでセキュリティ面での安全性なんかは未確認です。OSSですが利用前にご自身でチェックして下さい。 JS製のショッピングカート。Mootools、jQuery、またはPrototypeに依存するライブラリです。JS+localStorageで作ってるっぽいです。ライトに使えて良さそうですね。※安全なら チェックアウトはPaypalやGoogleチェックアウトに対応しています。ソースをチラッと見たら”JPY”: { code: “JPY”, ～と言った表記があったので日本の通貨の事も一応考慮してくれてるかもしれない。 <s
iPhoneの「ホーム画面追加」を促す | Agnist.code
http://code.google.com/p/mobile-bookmark-bubble/ こいつを使うことでiPhone表示時に画面下側へ下記のように出せる。 1. ソースのダウンロード[Source]→[Browse]のページを開き、「bookmark_bubble.js」を落とす。 左側の「example」を開き、「example.js」を落とす。 2. HTMLへ組み込む下記の感じで組み込む。 <script type="text/javascript" src="js/bookmark_bubble/bookmark_bubble.js"></script> <script type="text/javascript" src="js/bookmark_bubble/example.js"></script> 自分の場合は整理のため「bookmark_bubble」というフ
[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル
jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Questionクリック時 実装 Step 1: 外部ファイル 「jquery.js」を外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Step 2: HTML 質問はh3要素、回答はp要素で実装し、div要素で内包します。 <div id="w"> <h2>User Accounts</h2> <div class="q"> <h3 class="qhead"><a href="#q01">よくある質問</a></h3> <div clas
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri
[New] JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた | TM Life
以前『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』 というエントリーを書いたのですが, tmlib.js の仕様が色々と変わってしまい動かない状態だったので, 修正しました. よかったら参考にしてください. 自作ライブラリ tmlib.js を使って, 円同士の衝突プログラムを作ってみました. やっているのは, 円同士の衝突判定 めり込みの補正 衝突後の反発 です. ちゃんと計算するなら, 衝突時間を調べてその分ベクトルの長さを調整して… ってやんないといけないのですが, 速度的に問題があるってのと難易度が上がってしまう(ホントはめんどくさい)のでちょっと省略しています. サンプルは jsdo.it の方に移植してあるので, 実際に 動かしたり, fork してイジったりして頂けると嬉しいです. Table of contents Code T
HTML5製のWebサイト向けUIフレームワーク・Kendo UIモバイル版の日本語サンプル作った - かちびと.net
以前ご紹介した、HTML5製のWebサイト 向けUIフレームワーク・Kendo UIの モバイル版に触ってみたついでに 日本語化してサンプルにしました。 まだベータ版みたいなので、実用 段階では無さそうですが。 Kendo UIのモバイル版です。去年の夏くらいに記事書いたので合わせてご参照頂ければ幸いです。 タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI 選択肢はずいぶん増えてきましたが、これもその一つという事で・・・jQueryベースで動作しますので、JQMの代替として覚えておいてもいいんじゃないでしょうか。 基本的には有償版の販売がビジネスモデルみたいですが、OSSとしてGPLライセンスで配布されています。モバイル版もそんな感じ。 Kendo UI Mobile モバイルバージョンです。触った感触として、まだ他フレームワークに比べて物足
画像を使わず、CSS+jQueryで絵文字を作れる・JQuery CSS Emoticonsがちょっと素敵だｗ
これはちょっと面白いｗ画像を使わず、cssとjQueryだけで顔文字を作ってしまったみたいです。発想が単純だったのでうまく応用出来れば楽しいものが出来あがりそうな予感もしますな。面白い事考える人がいますね・・ｗ CSS+jQuery（と、もちろんHTML）のみで、画像は一切使われていません。ちょっとこの発想なかったです。ユニークですけど、割と使い勝手がいい気がする・・気のせいかなｗ 一見よく見かけるアイコンだと思うんですけど、これ、全部cssとテキストとjsで作られています。 からくり こういう発想。単純だけど思いつきませんでしたｗなので、以下のようにテキストとして選択できます。 :Ｄとか:ｐを縦にして、グラデーションのかかった黄色い枠を作れば完成ですね。 コード<link href="stylesheets/jquery.cssemoticons.css" media="screen"
JavaScriptのライブラリを沢山集めてカタログ化しているWebサイト・Jster - かちびと.net
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。（気がするだけかも 困ったら覗いてみようと思います。 Jster
new msgpack.js with ArrayBuffer - latest log
リクエストを頂いたので、 ArrayBuffer を使った msgpack.js を書きました。 とりあえずコードを書いた段階で、識者の意見を取り入れて I/F の改善や、妥当性のチェックとテストケースの作成、ベンチマークなどはこれからの作業になります。 https://gist.github.com/4106426 MobileSafari と Android 4.0 での DataView のサポート具合が良くわからなかったので、ArrayBuffer + Uint8Array だけで実装しています。 // encode a = msgpack.pack({ a: [1,2,3, { b: 4, c: "hoge" }, "abc"] }); // -> [129, 161, 97, 149, 1, 2, 3, 130, 161, // 98, 4, 161, 99, 164, 104
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
[JS]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja
デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.baraja.js"></script> HTML 各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。 <ul id="baraja-el" cl
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEをHTML5やCSS3に対応させるJSライブラリーまとめ | A!@attrip