こんにちは。内藤です。 HTML5でアプリを作成する場合、画像は予め用意されたpngファイルをそのまま表示することが普通で、アプリ側でエフェクトをかけたりすることはあまりありません。けれども、HTML5のCanvasを使うことでアプリ内で画像を作成する機能は作れるので、ここでは作った画像を画像ファイルとして扱い、保存する部分までの実装方法について説明します。 これを応用すれば、アプリで作成した画像をメールで転送したり、サーバーにアップロードしたり、といったことも可能です。 内部的には、JavaScriptでバイナリを扱うArrayBufferオブジェクトが登場しますので、これの使い方も参考にして下さい。 お絵描きの基本機能 まずは、Monacaから最小限のアプリを作り、JS/CSSコンポーネントよりjQuery(Monaca version)を入れておきます。 次のリストによりお絵描き機能

Webページの内容をローカルに保存して、Android機で見るという状況を考えます。 オフラインで見るだけならRead It Laterなどの手段もありますが、認証つきサイトだとローカル保存できないといった制約があるので、ここではPC上のブラウザでページを保存→SDカードにコピー→Android上のブラウザで開くという手順を取ることにします。 (これだけでも十分めんどくさいですが…) …が、Androidの標準ブラウザには「ファイルを開く」という操作がない！ ということで、SDカードに保存したHTMLファイルをAndroid上のブラウザから開く方法について少し実験してみました。 検証環境は、EVO 3D (ISW12HT, Android 2.3.4, ファームウェアバージョン 1.09.970.5) です。 HTMLファイルの準備 ここでは実験として、以下のような小さいHTMLファイルを

HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア

HTML＋CSS＋JavaScriptを使ってスマホやタブレットで動作するアプリが簡単に作成できる「Monaca」を基礎から解説する入門者向け連載（改訂版）がスタート。今回はMonaca／Onsen UI／AngularJSの概要とMonaca IDE、Monacaデバッガーを紹介。 連載 INDEX 次回 → スマホやタブレットで動作するモバイルアプリがHTML＋CSS＋JavaScriptを使ってクラウド上で作成できるMonacaという開発環境をご存じだろうか？（図1-1） Monacaは2013年9月12日に正式リリースされ、今回、Onsen UIというUI（ユーザーインターフェイス）用コンポーネントと、AngularJSというJavaScriptプログラミングシステムを手に入れた。この連載では、HTML、CSS、JavaScriptの基本を一通りマスターした方を対象に、複数回に分け

Picky-Pics（ピッキーピックス）は誰でもプロ並みのデザインでポスターやチラシ、 プレゼン資料などが作れるオンラインデザインツールです。

東京・京橋にある写真センターTOKYO INSTITUTE of PHOTOGRAPHYの72Galleryで、写真展「オードリー・ヘップバーン-KOBALコレクションより」が開催される。期間は2015年2月4日(水)から年3月29日(日)まで。 その清純な美しさで人々を魅了し、永遠のファッションアイコンとして愛されるオードリー・ヘップバーン。今回展示されるのは、オードリーのキャリア初期の写真、ポートレート27点。すべてオリジナルプリントで販売もされる。 さらに、今回の写真展はリコーイメージングスクエア銀座 ギャラリー A.W.Pでも同時開催。リコーイメージングスクエア銀座では、72Galleryとは異なる約30点の写真を展示、主にゼラチンシルバープリントのモノクロ作品での販売が行われる。 両ギャラリーの共同企画で実現したこの写真展に、ぜひ足を運んでみて。 【展覧会概要】 写真展タイトル：

こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし

タッチデバイスのUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様を見てみよう。 前編のタッチUXを実現する7つのポイントでは、タッチデバイスの特徴と、その上でタッチUXを実現する7つのポイントについて説明しました。後編では、そのようなUXを実現するためにWebアプリでのタッチ仕様や、実装のポイント、今後の動向など、より技術的な面から解説します。 W3Cによるタッチイベントの標準化 Webアプリケーション向けのタッチイベント仕様はW3Cによって標準化が進められていて、執筆時（2012/10/20 現在）の段階で、勧告候補となっています（最新のものはW3Cの明示する「Touch Events version 1」を確認してください）。まだ仕様は確定していませんが、最新のiOS、Androidのブラウザでほぼ仕様通りのものが使用できます。タッ