Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT
Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基本的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル
html5でドラッグ＆ドロップの処理 - Web.fla
イベントの種類とデフォルトの動作をキャンセル ドラッグ＆ドロップを実現しようにもブラウザにはドロップされたものを表示するというデフォルトの動作があるので、そいつをキャンセルする必要がある。ただしドラッグを開始する「dragstart」は特にキャンセルする必要はない。 とくにhtml5（javascript）でドラッグ＆ドロップを実現する場合は、「dragover」のイベントをキャンセルするのは必須のようです。 ドラッグ＆ドロップを行うには下記のようなイベントが主にあります。 //ドラッグする要素をドラッグするとき target.addEventListener("dragstart",function(event){ },true); //ドロップ領域にドロップされたとき target.addEventListener("drop",function(event){ event.preve
html5でドラッグ＆ドロップでローカルからテキストファイルをアップロード - Web.fla
先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法をメモ。 前回と同じ、ドラッグ＆ドロップのデフォルト動作のキャンセルやdragoverのイベントの動作のキャンセルに関しての説明は省く。 // JavaScript Document window.addEventListener("load",function(){ // var drop=document.getElementById("dropArea"); drop.addEventListener("drop",function(event){ //デフォルト動作をキャンセル event.preventDefault(); //①filesでドロップしたファイル数を取得 var filelist=event.dataTransfer.files; // for(var i=0; i"; } // }
HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism
社内で使用するファイルアップローダを作ることになりました。 実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。 実装手順をメモとして残しておきます。 仕様、完成図 まずは完成図から。 仕様は、 ドラッグ&ドロップでファイルをアップロード 従来の「ファイルを選択」ボタンからでも可 複数ファイルに対応 という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m
お絵描きアプリと画像の保存処理の実装
こんにちは。内藤です。 HTML5でアプリを作成する場合、画像は予め用意されたpngファイルをそのまま表示することが普通で、アプリ側でエフェクトをかけたりすることはあまりありません。けれども、HTML5のCanvasを使うことでアプリ内で画像を作成する機能は作れるので、ここでは作った画像を画像ファイルとして扱い、保存する部分までの実装方法について説明します。 これを応用すれば、アプリで作成した画像をメールで転送したり、サーバーにアップロードしたり、といったことも可能です。 内部的には、JavaScriptでバイナリを扱うArrayBufferオブジェクトが登場しますので、これの使い方も参考にして下さい。 お絵描きの基本機能 まずは、Monacaから最小限のアプリを作り、JS/CSSコンポーネントよりjQuery(Monaca version)を入れておきます。 次のリストによりお絵描き機能
offline-todo - ネットがなくても使えるWebベースのTodoアプリ
HTML5の新しいAPIの一つにアプリケーションキャッシュがあります。アプリケーションキャッシュを使えばオフライン時であってもWebアプリケーションが使えるようになります。もちろんサーバ上のデータはとれませんので、データをストアする仕組みが別途必要です。 新しい技術が組み合わさって提供されるだけになかなか手出ししづらいイメージがあります。そこで参考になるソフトウェア、offline-todoを紹介します。 offline-todoの使い方 offline-todoではデータの保存にIndexedDBとWebSQLを使っています。IndexedDBはiOSでも使えるようになりますし、この技術の組み合わせであればオフラインでも動作するWebアプリケーションが実現できるようになりそうですね。 offline-todoはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていま
web audio api使って声の高低に合わせてオブジェクトを上下させるアプリつくりました - TechTalkManiacs
13日に開催されたweb music ハッカソンで声の高低に合わせてオブジェクトを上下させるアプリ作ってきました マイクを許可して、声か楽器の音程を上下させると丸い球が上下に動きますので、横から飛んでくる棒を避けてください。 仕組み web audio apiには波形をフーリエ解析するAPIがあり、音にどの周波数がどれくらいの音量で含まれているのかを2行ほどで解析してくれます。(サンプル)。 これを使うことでボコーダーやコード進行の検出のような踏み込んだ音のハックができるわけです。 このアプリではanimationframeごとにもっとも音量の大きい周波数を取得し、それを音の高低としています。ただし実際には最大の周波数はかなり揺れるので50フレーム分の平均を取って平滑化し、滑らかにみせています。慣性のような挙動をするのはそのせいですね これから 当たった時の演出を乗せて、教育用のゲームとし
HTML5の技術だけで実装！「YouTubeみたいなWebGLプレーヤー」とは？
HTML5の技術だけで実装！「YouTubeみたいなWebGLプレーヤー」とは？ 松田光秀（jThree合同会社） この記事では、HTML5 Japan Cup 2014で優秀賞を頂いた「YouTubeみたいなWebGLプレーヤー」で利用されている技術を解説します。 はじめに 「YouTubeみたいなWebGLプレーヤー」はコンテンツそのものとは分離された、オープンソースJavaScriptライブラリ「jThree」のプラグインです。オープンソースとして公開していますので、誰でも自身の作品に差し替えてブログなどに掲載することができます。WebGLの描画部分は全てjThreeで管理しています。この記事では、プレーヤーで採用している2つのHTML5 APIとjThreeの概要をご紹介します。 プレーヤーの機能 このプレーヤーは、まるで動画のごとくWebGLコンテンツを楽曲付きで再生できます。動
HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。ゲームエンジンは多数存在しますが、今回は特に2Dをサポートしたソフトウェアを紹介します。mBaaSお役立ちブログ トップ> ブログ> Tips> HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。 ゲームエンジンは多数
PuzzleScript - HTML5製のパズルゲームフレームワーク
Webブラウザ用のゲームはインストール不要ですぐに遊べるのが利点です。そのため、あまり本格的なゲームよりもルールがすぐに覚えられてカジュアルに遊べるゲームの方が人気があります。 その一つとしてパズルゲームがあげられます。徐々にレベルアップしていけば、説明も殆ど必要ありません。ということで今回はそんなパズルゲームを作るためのフレームワーク、PuzzleScriptを紹介します。 PuzzleScriptの使い方 デモゲームを見ていきましょう。 どのゲームもとてもシンプルで、矢印キーとXキーくらいしか使いません。後はRキーでリセット、Zキーで一歩戻る操作になります。ゲームを作るための専用のエディタと言語を組み合わせていくことで、手軽にパズルゲームが作れるようになっています。 PuzzleScriptはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
jCanvas – jQueryのパワーでCanvasをもっと使いやすく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で新しく追加された機能の一つにCanvasがあります。グラフィックスを描いたり、画像などのバイナリを描画したりすることもできるので使えそうな場面は多いと思うのですが、勝手が違ってなかなか手を出しづらいのが実情です。 そこでJavaScriptがjQueryで圧倒的に使いやすくなったように、CanvasについてもjCanvasを使えばもっと手軽に使えるようになりそうです。 jCanvasの使い方 例えば円を描くコードは次のように書きます。 // Draw a circle $("canvas").drawArc({ draggable: true, fillStyle: "green", x: 100, y: 100, radius: 50 }); ぱっと見で分かりやすいで
Webix·多彩なウィジェットを提供するHTML5デザインフレームワーク MOONGIFT
開発者にとってデザインは大きな関門です。だからBootstrapのようなフレームワークに人気が集まります。デザインを気にせずさくさくとWebアプリケーションが開発できれば、もっとプロダクトは増えていくはずです。 そこで今回紹介するのがWebixです。HTML5のウィジェットフレームワークで、アプリ開発に大いに役立つはずです。 Webixの使い方 テーブル。セルの結合やスクロール部分の指定などかなりこだわった表示ができます。 ツリービュー。 ナビゲーション。 動画アップロード。ステータス表示機能付きです。 レイアウト。かなり細かく指定できます。 リスト。 ウィンドウ。ポップアップ。 フォーム。 カレンダー。 テーブル&ツリー。 データビュー。 グラフ。 より作り込まれたデモです。 グラフと表の組み合わせです。 地図、国のリストなど。 ファイルマネージャ。メールでも使えそうですね。 Webix
Banner Maker - Create Your Banner Online for Free | OnlyMega.com
New! Download your banners as AMP HTMLCreate animated HTML5 Banners Gif, Mp4 & Png display adsDive into the creative process without having programming skills. Onlymega is the right online web tool to start creating high quality web html5/javascript banners for Ad networks, Gif posts and covers for Facebook and Youtube, Mp4 export for Instagram. Quickly make amazing Google Ads banners, Facebook ad
Paletta – 選択した色に合わせたカラーリングを自動展開
Webサイトに限らずデザインをする際に大事なのは全体としての調和がとれていることです。それは色合いであったり、オブジェクトの形であったりします。そういった全体のパランスが保たれていることがまず基本でしょう。 最近は多くのHTML5デザインフレームワークがありますので、そういったフレームワークとPalettaを組み合わせてカラーテーマを作ると格好いいサイトに仕上がりそうです。 Palettaの使い方 全て同色系という訳ではなく、黒やグレーも織り交ぜつつ全体としてバランスが保たれるようになっています。とは言え全ての色を使う訳ではなく、この中から3〜4つ程度をピックアップして適用するといい具合のカラーリングになるのではないでしょうか。 PalettaはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Paletta - HS
HTML5なら3日でクソゲーが作れる【実践編1】 | 株式会社NEXT
NEXTの骨無しポークです。 HTML5+javascirptでクソゲーを作ってみたわけですが、 今回からあのゲームの作成過程を書いていこうと思います。 まずは1日目です。 企画 ネタがないなぁ。 そうだ、ゲーム作ろう。簡単そうなシューティングにしよう。 決定。 必要な環境をそろえよう すべて自分でやるのであれば、 HTMLやjavascriptを編集するためのテキストエディタ(メモ帳とか) 画像を編集するためのペイントツール(ペイントとか) 音声編集の出来るソフト(フリーソフトを探すなり、何か製品を買うなり) が必要です。 私はテキストエディタはサクラエディタ、画像編集ソフトはペイント、音声編集はFLStudio+Synth1でやりました。 サクラエディタはMS Windows上で動作する日本語テキストエディタです． http://sakura-editor.sourceforg
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Initializr - HTML5のWebアプリケーション開発をはじめるならここからスタート！ MOONGIFT
Webアプリケーションを作り始めようと思った時に、色々なファイルをダウンロードしたり配置しないといけないと思うとげんなりしてしまいますよね。作りたい！と思った勢いをそのままに開発に入りたいものです。 そこで使ってみたいのがInitializrです。HTML5アプリケーションを開発する際に使って欲しい、スタートアップキットになります。 Initializrの使い方 ベースは3つ用意されています。素のHTML5、レスポンシブそしてBootstrapベースです。 ベースを選んだら細かな機能を選択できます。 こんな感じにファイル一式がダウンロードできます。 Bootstrapベース。 レスポンシブ。 素のHTML5。 InitializrではModernizrやHTML5shiv、Google Analyticsなど様々なノウハウが詰まったテンプレートがダウンロードできます。カスタマイズも簡単なの
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
creatorcheck.net
