お絵描きアプリと画像の保存処理の実装
こんにちは。内藤です。 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ブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。 ゲームエンジンは多数
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
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ（その1）
本連載では、業務アプリケーション開発を行う熱血若手エンジニアのために、面倒な作業が楽になる便利なツールをご紹介します。「定時になったらスマートに帰社してアフター5を存分に楽しみたい！」や「設計書やレビューの準備に煩わされるのは嫌だ、コーディングに集中したい！」などを実現してくれる便利なツールやソフトウエアを、サンプルコードを交えて説明します。 はじめに 普段、設計書をもとに業務アプリケーションを開発したり、単体テストや連結テストに追われて忙しい日々を過ごしたりしていると、たまには気分転換で、なにかおもしろいモバイルアプリを手軽に作りたいなということはありませんか？ しかし、いざ時間の取れる週末にアプリを作ろうと思ってみたものの、自宅のパソコンに開発環境を用意したり、開発に必要なライブラリなどをダウンロードしたり設定したりしていると、それだけであっという間に時間が過ぎてしまいます。また、An
UIkit - コンポーネントがたくさんある軽量HTML5デザインフレームワーク MOONGIFT
これだけ色々出てくるとどれを使おうか迷ってしまいますね！ UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。 UIkitのスクリーンショット 今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。 トップページ風デザイン。 画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。 ポートフォリオ風。 マウスオーバーで拡大するための虫眼鏡表示。 モーダルもあります。 ブログ風。 ドキュメント表示。 コンタクトやチームメンバーの表示。このレイアウトいいですね！ フォーム付き。もちろんメンバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS対応のHTML5製モバイルWebアプリ向けのフレームワーク・「Ionic」
無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay