JSONデータをHTMLフォームに変換し、更にJSONに戻せる「medea」:phpspot開発日誌GitHub - julianbrowne/medea: JSON manager: jQuery plug-in that converts JS & JSON objects to HTML forms and back again JSONデータをHTMLフォームに変換し、更にJSONに戻せる「medea」 JSONデータの見たまま編集が簡単に実現できそうです 関連エントリ JSONデータをタイムラインとして表示してくれる「jQuery-TimelineMe」
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
Amplitude.js - HTML5のリッチなUIのオーディオプレイヤー MOONGIFT
HTML5で音楽ファイルを扱うことができるようになりましたが、素の状態では殆どUIが提供されていません。そんな状態で提供しても全く魅力的ではないでしょう。別途UIを作り込む必要があります。 今回紹介するオープンソースソフトウェアはAmplitude.js、HTML5のオーディオプレイヤーです。これを使えば格好良いUIで提供できるでしょう。 Amplitude.jsの使い方 上の再生部分がプレイヤーになります。 マウスオーバーで再生、停止に表示が変わります。 こんな感じです。 サムネイルだけでなく、アルバムの拡大表示もできます。 プレイリストにも対応。 SoundCloudも再生できます。 ビジュアライズも。 シンプルも良いですが、もっとリッチなプレイヤーにもできます。 Amplitude.jsを使えばリッチで使い勝手の良いHTML5のオーディオプレイヤーが簡単に提供できるようになります。も
ブラウザから使える O/R マッパ、 js-data を使ってみる - クックパッド開発者ブログ
ヘルスケア事業部の濱田です。花粉がつらい時期ですが、みなさん楽しく開発してますか？ おいしい健康では、JavaScript（以下 JS）で非同期にサーバ側のリソース操作を行う際に、js-data というライブラリを使っています。Rails ユーザにとってはとっつきやすい便利なライブラリですが、日本語での情報がほとんど見当たらなかったため、簡単にご紹介したいと思います。 js-data とは JS 製のデータ管理用ライブラリです。RESTful API などを通じて取得できるデータ（リソース）を抽象化して、CRUD 操作を統一したインターフェースで行えるようにしてくれます。 リソースごとにオブジェクト（モデル）を定義したり、find でデータを取ってくるなど、ActiveRecord などの O/R マッパのような使い勝手が特徴。設計等には Ember data の影響を受けています。 以下
xterm.js - JavaScriptで作られたWebベースのコンソール風UI MOONGIFT
クラウドサービスの中には、Webブラウザからサーバにログインして操作できるような機能を提供しているものがあります。エンジニアであればWeb上で設定するのではなく、コンソールで操作した方が手軽と言うことは多いかと思います。 そんな機能を実現してくれるソフトウェアがxterm.jsです。JavaScriptで作られたターミナル風ソフトウェアです。 xterm.jsの使い方 デモの画面です。文字を打ったりすることができます。何かが実行できるという訳ではありません。 xterm.jsはSourceLairによって開発されていて、ユーザがアプリケーションの操作を行うのに使われています。xterm.jsをベースにすることで、クラウドサービスをCLIから使えるようにするのは面白いかも知れません。入力内容を読み取れるので、入力された文字列によってコマンドを実行すれば良いでしょう。 xterm.jsはJav
Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ MOONGIFT
Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。 そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドローライブラリとなっています。これならば既存のサイトと組み合わせた使い方ができるようになります。 Drawingboard.jsの使い方 使い方は簡単で、CanvasのIDを渡すだけです。 こんな感じでカスタマイズもできます。 線種を変えたり、画像でダウンロードする機能もあります。 Drawingboard.jsは自分たちのサイトに埋め込んだり、既存の機能と合わせて使えるようになっているのが利点です。手書き画像をサーバに送れる機能を実装するのも良いでしょう。カスタマイズが容易
サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」
ページに目次があると内容がある程度わかって分かりやすいこともあります。 WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。 先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。 TOCとは TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。 ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています） このTOCプラグインの特徴は以下です。 カスタマイズの自由度が高い 目次をクリックするとスムーズにスクロール移動する 現在見ているセクションをハイライト表示 スクリプトが軽量 スムーズなスクロール
Screenshot as a Service - Webサイトのスクリーンショットを保存するコマンド MOONGIFT
Webサイトのスクリーンショットは色々な場面で使われます。ニュース系サイトであったり、Webサイトを紹介するブックマーク的なサイトでも使われるでしょう。そんなスクリーンショットを一つ一つ手動で保存していたら時間がかかってしまいます。 そこで使ってみたいのがScreenshot as a Serviceです。Webサイトを画像化するコマンドツールです。 Screenshot as a Serviceの使い方 Screenshot as a Serviceを使ってGoogleのスクリーンショットを保存する例です。 画面の幅や高さを指定することもできます。レスポンシブなサイトに良さそうです。 さらにウィンドウの一部だけを指定も可能です。 Screenshot as a Serviceはコードから操作もできるので自動化することもできます。ウィンドウの中だけなので余計な機能拡張が写ってしまうこともあ
Web Audio APIを利用してオーディオビジュアライザを作成する ~その1 音声データを読み込んで音を出す~ - Qiita
Web Audio APIを利用してオーディオビジュアライザを制作したので、それに関する備忘録です。 まとめて書くと内容が長くなり、複雑で解りにくなりそうなので分けて書いています。 その1は簡単な概要と音声データを読み込んで音を出すところまでです。 Web Audio APIとは Audioを扱うAPI。 AudioNodeを接続して、音(信号)に対して様々な操作ができる。 AudioNodeとは 音量の調整、周波数の解析、フィルタをかけたりと音(信号)に対して様々な操作ができるノード。(モジュールのようなもの) AudioNodeはいくつでも接続することができ、最終的にはAudioDestinationNode(出力)に接続して音を出す。 現実世界で言うとマイク(入力)、エフェクタ(フィルタ)、スピーカー(出力)をコードで繋げていくのと同じ。 とりあえず音を出す デモ(ページを開くと音が
編集可能でインクリメンタル検索も出来るselect実装jQueryプラグイン「Editable Select」:phpspot開発日誌
jQuery Editable Select Example 編集可能でインクリメンタル検索も出来るselect実装jQueryプラグイン「Editable Select」 自分で内容を入力できつつ、既存値からも選択できるselect実装が出来ます。 関連エントリ 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 美しいUIの月間イベントカレンダー実装jQueryプラグイン「Monthly.js」 アドブロック判別用jQueryプラグイン「Adi.js」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」
Marked.js で Markdown をクライアント側でパースして表示する - Qiita
で、HTML に整形された文字列が返されるというシンプルなもの。(整形オプションがいろいろあるようだが割愛) Typescript クイックガイドでは、HTML 内に Markdown テキストがベタ書きされていたが、せっかくなので管理がしやすいように外部 Markdown ファイルを読みこむようにしてみた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Markdown renderer</title> <meta name="description" content="Markdown renderer"> <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="styles
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 今まで markdown-js ってのを使っていたのですが, marked ってやつが table とか code block とかデフォルトで対応してて良い感じだったので 導入がてらまとめました. ついでに簡易エディタの作り方もざっくり書いたので最後まで見てもらえると幸いです. marked.js とは A full-featured markdown parser and compiler, written in JavaScript. Built for speed. markdown 用のパーサー
jCanvasによる楽々グラフィック描画 - Qiita
データベースと言ったら、何を連想しますか？SQL？Oracle？いろいろと出てくると思いますが、きっと10位以内に入ってるキーワードとして、必ず「ER図」はあると思います。ER図は書くのが面倒なので、もし手元にある実際のデータベースからER図を自動的に書いてくれたら、こんなに楽なことはないですよね？はい、作ってみました。 この機能を作るために、いくつか図を描画するためのライブラリを検討しました。しかし、しっくり来るものは残念ながらありませんでした。一つ使えそうだったのがJointJSだったのですが、依存ライブラリとして「jQuery, Backbone, Lodash, Geometry, Vectorizer」というそうそうたるメンバーが必要で、やむなく断念しました。そう、ないものは自分で作るしかありません。ER図のような作図は、オブジェクトを描画すること自体は難しくありません。とにかく
楽譜を作成できる abc.js を試してみた
概要abc.js はブラウザ上に楽譜を描画することができるライブラリです 楽譜の描画に必要な情報を渡すと SVG 形式で楽譜を描画してくれます 環境CentOS 6.7 64bit Apache httpd 2.2.15 Firefox 43.0.4 abc.js 2.3 abc.js のインストールインストールは簡単です 必要な js ファイルを適当な場所に配置すれば OK です 今回は既存のサイトの <pre> 情報から楽譜を作成するプラグイン方式と、abc.js のメソッドをコールすることで楽譜を描画するベーシック方式の 2 種類で楽譜を作成してみました abcjs_plugin を使ったサンプルコードまずはプラグイン方式を使った方式を紹介します cd /var/www/html/abcjs wget https://raw.github.com/paulrosen/abcjs/ma
jQuery Terminal Emulator Plugin
__ _____ ________ __ / // _ /__ __ _____ ___ __ _/__ ___/__ ___ ______ __ __ __ ___ / / __ / // // // // // _ // _// // / / // _ // _// // // \/ // _ \/ / / / // // // // // ___// / / // / / // ___// / / / / // // /\ // // / /__ \___//____ \\___//____//_/ _\_ / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/ \/ /____/ 2.39.0 __ ____ ________ __ / // _ /__ ___/__ ___ ______ __ __ __ ___ / / __ / // // /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - robertjanes/video-resize: Efficiently scale HTML5 videos
時間をユニークな方法で指定するUI実装jQueryプラグイン「timedropper」:phpspot開発日誌
Webページにドローツールを埋め込むためのスクリプト・「Drawingboard.js」
Video.js-Html5を用いて動画を再生するライブラリ - MatchaJob
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
