Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ -
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
HTML5+Canvasでパーティクルっぽいのを作ってみる
HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 投稿日2015年07月16日 更新日2019年04月13日 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成します。
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選 Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。 JSFiddle 多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。 Create a new fiddle – JSFiddle CodePen グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。 CodePen – Front End Developer Playground &
jadeのテンプレートを触ってみた ｜ Tips Note by TAM
こんにちは。中川です。みなさまご無沙汰です。お元気でしょうか。 さて新しい案件で、何か新しいことをしてみようかと思い、jadeを使ってみようかと思いました。 で、ひと通り調べたことをメモしていきます。（注：以下は全てMacでの操作になります） ■jade（http://jade-lang.com/(外部サイトに飛びます)） githubのページには、 「Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node. 」 （Hamlに影響を受けた、Node.jsのHTMLテンプレートエンジン。） と書かれています。 これだけはいまいちピンとこないので、さっそく使ってみることにしました。 ■インストール jadeはnode.jsで動くの
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
AngularでHTML5モバイルアプリを作るのに便利なライブラリたち
AngularでHTML5モバイルアプリを作るのに便利なライブラリたち ng-conf 2014っていうイベントが1月にあったようですね。 YouTubeで動画が公開されている(でもすべてではない)ので助かります。とても勉強になりますね。ほんと、いい時代になったものです。 さて、Daniel ZenのTalkを見ました。AngularJSでモバイルアプリを作るために使えるライブラリがいっぱい紹介されていたのでメモしておきます。 PhoneGap まず、PhoneGap。 今では、Open Sourceなんですね。 http://cordova.apache.org/ 使ったことはないですが興味はあります。 一部ネイティブ関数にもアクセスできるようです。 http://en.wikipedia.org/wiki/Phonegap#Supported_platforms APNも使えるようです
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」:phpspot開発日誌
Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを追加して、便利にしてくれるというもの。 既存のHTMLにソートやフィルタなどの機能拡張したい場合に使えそうです。 関連エントリ アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 リストやテーブル、DIV等の要素を好みにJSでソートできるjQueryプラグイン「SortedList」 テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」
JSCapture·こんなことまで！JavaScriptでスクリーンショット&キャストの保存 MOONGIFT
HTML5ではgetUserMediaを使ってWebカムにアクセスできるのは良く知られています。しかしデータの入力元は他にも考えられます。その一つがディスプレイです。画面に表示されている内容は確かに出力データになるでしょう。 そんな画面の内容をキャプチャできる機能が最新のGoogle Chrome（35以上）から登場しています。その実験とも使い方を紹介するのがJSCaptureです。 JSCaptureの使い方 まず最初にGoogle Chromeの設定を有効にする必要があります。 設定を有効にしたら再起動しましょう。 まずはキャプチャです。JSCaptureのサイトで実際に試すことができます。キャプチャをクリックするとダイアログが出ます。 画面共有の確認が出ますので、はいを押します。 見事キャプチャされました。Downloadを押して画像として保存できます。 次にレコーディングです。結構
Herlock.js for HTML5 - JavaScriptで高パフォーマンスなゲームを開発できるHerlockのブラウザ版 MOONGIFT
iOS/Androidアプリをワンソースで…というのは誰しもが夢見ることではないでしょうか。しかし現実はそうそう甘くなく、打ちのめされた人も多いでしょう。なんでもワンソースは無理がありますが、一部の分野であればこなせるようにはなっています。 3Dや高機能なゲームであればUnityがあります。もっとカジュアルなゲームであればJavaScriptで開発できるHerlockがあります。そしてさらにHerlockをHTML5として動作させようと言うプロジェクトがHerlock.js for HTML5です。 Herlock.js for HTML5の使い方 例としてこういった図形を描く場合です。 var stg,bmp; new Image( "./img/check.png").onload = function(){ stg = addLayer( new Stage()).content;
HTML5-Packer – HTML5アプリケーションを1ファイルにパッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合
Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ（その1）
本連載では、業務アプリケーション開発を行う熱血若手エンジニアのために、面倒な作業が楽になる便利なツールをご紹介します。「定時になったらスマートに帰社してアフター5を存分に楽しみたい！」や「設計書やレビューの準備に煩わされるのは嫌だ、コーディングに集中したい！」などを実現してくれる便利なツールやソフトウエアを、サンプルコードを交えて説明します。 はじめに 普段、設計書をもとに業務アプリケーションを開発したり、単体テストや連結テストに追われて忙しい日々を過ごしたりしていると、たまには気分転換で、なにかおもしろいモバイルアプリを手軽に作りたいなということはありませんか？ しかし、いざ時間の取れる週末にアプリを作ろうと思ってみたものの、自宅のパソコンに開発環境を用意したり、開発に必要なライブラリなどをダウンロードしたり設定したりしていると、それだけであっという間に時間が過ぎてしまいます。また、An
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。
あなたが読むべきJavaScript Promises | JSer.info
はじめに この記事は、 JavaScript/ES6 promisesについてを理解するために読んだ方がよいと思われる記事やスライド等を紹介しています。 PromisesやDeferredといった言葉を非同期処理の話などで聞いた事があるかもしれませんが、 現在Promisesは次のECMAScriptの言語仕様として策定が進められています。 ECMAScript Language Specification ECMA-262 6th Edition – DRAFT domenic/promises-unwrapping まだES6は策定段階ですが、既にPromisesについてはpolyfillとして利用できるライブラリ等もあり、また他のライブラリ内でもjQuery.Deferred()やAngularの$q等類似する実装が存在します。 そのため、Generators等に比べると今すぐ使える
HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」:phpspot開発日誌
Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン
HTML5/JavaScriptで作るAndroidアプリ開発seminar
Androidアプリを作るのには、Javaの知識が必要？！いいえ、HTMLと少しのJavaScriptが使えればいいんです！HTML5/JavaScriptでAndroidアプリを作る方法を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」
Site Under Maintenance
