成功するPhoneGapアプリを開発するための高速化＆UXテクニック
要素を描画するためには、その子供の要素が描画される必要があり、さらにその子供が描画され・・・という具合に連鎖していきます。要するに、親要素を描画する前に、すべての子要素の内容がGPUにアップロードされる必要があります。その結果として、描画に時間がかかるだけでなく、GPUメモリー使用量の肥大化や最悪アプリケーションをクラッシュさせる原因となってしまいます。 また、GPUの最大テクスチャーサイズも考慮する必要があります。もしDOM要素がGPUのサポートする最大テクスチャーサイズ（横幅・縦幅のいずれか）よりも大きい場合、パフォーマンスの低下や品質の低下が発生します。translate3dを用いたアニメーションやスクロールの際に、HTML DOM要素の描画がちらついた経験はありませんか？これはDOM要素の縦横サイズがGPUのサポートしているテクスチャーサイズよりも大きいことが原因です。多くのモバイ
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも
SAP、業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも 業務アプリケーション最大手の独SAPは、業務アプリケーションのためのJavaScript製JavaScrit UIライブラリ「OpenUI5」をオープンソースとして公開しました。 OpenUI5は、同社のモバイルアプリケーションなどに用いられているJavaScript製ライブラリ「SAPUI5」の主な機能をオープンソース化したもの。jQuery、CSSプロセッサのLESS、ODataライブラリのdatajsなどが使われています。 ボタンやアコーディオン、メニュー、テーブル、ダイアログと言った部品だけでなく、レスポンシブ対応のグリッドレイアウトなどのレイアウト用部品も含まれており、モバイルデバイスに対応するレスポンシブデザインのUI構築が可能になっています。 JavaS
Web系がモバイルアプリ開発を覚えるまで - 素人がプログラミングを勉強していたブログ
昨年末あたりからモバイルアプリ(iPhone, Android)の開発をやっていて、新しい言語とかSDKを一気にいろいろと覚えた。Web開発ばかりやっていてスマホアプリは未体験だったので、今日はスマホアプリ開発について雑感をいろいろ書く。 Titanium Mobile 独自のSDK + JavaScriptでiOSアプリとAndroidアプリを作れるフレームワーク。やめといたほうがいいと思う。UI自体はDOMっぽい独自の物で作る+alert("hi")でアラートが出るなど、開発初期段階では高速につくれる。 しかし、問題点も多い。Titanium Mobileはプロトタイピング以外には向いてないというのが自分の感想。とっつきやすいのはいいが、ネイティブのSDKを覚える価値のほうが高く、しかも独自のSDKの学習コストも馬鹿にならない。 JavaScript自体の問題 規模が大きくなってくると
jQuery Mobileカスタマイズ自由自在
9/8に行われたHTML5 Conference 2012での「jQuery Mobileカスタマイズ自由自在」のセッション資料です。
jQuery Mobile 1.3.0 Betaがリリース！変更点まとめ - へっぽこプログラマーの日記
先日ついにjQuery Mobile 1.3.0 Betaのリリースがありました！ Announcing jQuery Mobile 1.3.0 Beta http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/ ここでは、jQuery Mobile 1.3の変更点を簡単にまとめたいと思います。 画面のサンプルやAPIなどについては、本家のBlogポストもしくはDocsを参照してください。 jQuery Mobile 1.3では、従来の予告通りResponsive Web Designにフォーカスしたアップデートになりました。Widgetの大きさにwidth: 100%などの指定をするように変更されており、画面サイズやグリッドなどにフレキシブルになるように設計されています。 これまでは、jQue
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた
HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadやiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
Web技術者に朗報！Firefox OSアプリ開発、触ってみたら簡単だった！ | OpenWeb
ここ数日、Firefox OSがにわかに盛り上がってまいりました。 2013年1月21日に開催した「第35回 HTML5とか勉強会（テーマ:『Web+OS最前線！』）」では、浅井智也さんのプレゼンテーションが大好評だっただけではなく、サプライズゲストとして登場した田中社長がFirefox OS搭載端末について言及しました。 そして本日、ついに開発者向けの実機もリリースされるというニュースが世界中を駆け巡りました。 そんなFirefox OS、昨年の味見部で触ってからずっと気にはなっていたのですが、いよいよ勢いも出てきたということで、ちょっと調べて見ることにしました。 とは言えぼくは、インストール可能な実機を持っているわけではないので、Firefox OSシミュレータを用いて、全部デスクトップで試してみます。 Firefox OSアプリの基礎知識 Firefox OSアプリ開発に必要なスキル
Firefox OS - naoyaのはてなダイアリー
Firefox OS が面白そう、というので少し触ってみました。 Firefox OS はWeb 標準ベースの開発を基礎としたモバイル端末用プラットフォーム、要は HTML と JavaScript と CSS でアプリケーション開発できるモバイル端末用の OS。間もなく Developer Preview Phone な実機が発売されるというのでにわかに盛り上がりを見せているみたいです。 Firefox OS が目指すところは Web 標準による、開発者がロックインされないオープンなプラットフォーム。iOS や Android の昨今の状況を見れば、そのアンチテーゼになるプラットフォーム構想があってもおかしくないわけで、まさにそれを目指しているようですね。 いったいどんなものかという概観は dynamis さんによるスライドが分かりやすい。 Firefox OS from dynamis
jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ
Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、モバイルネイティブのルック＆フィールを備えていると説明されてます。 modernizr、zepto、backboneなどに依存 Juniorが依存しているライブラリは以下。 modernizr（ブラウザごとに異なる実装を調べて、対応するコードを書きやすくする） zepto（jQuery互換のミニマルなライブラリ） zepto flickable（zeptoのタッチ対応プラグイン） lodash（U
Download | jQuery Mobile
jQuery Mobile is no longer supported. Please see the announcement blog post for more information. Download Download Builder We recommend using our tool to build a custom bundle that contains only the components you need. The builder generates a custom JavaScript file, as well as full and structure-only stylesheets for production use. Download Builder Latest stable version 1.4.5 ZIP file If you wan
アプリとかのブログ 【Titanium Mobile】Android版All SNSchecker 2.0を作りました
Androidアプリ、All SNScheckerはTitaniumでできております。 ＜PR＞そして、週刊プレイボーイにも紹介されました。 ＜／PR＞ ということで、All SNScheckerをどんな感じに開発したのか、 中身はどうなっているのかをちょっと公開したいと思います。 開発環境:Titanium Studio 2.0.1 Coffeescript Mac OX Coffeescriptはマジ開発効率の高速化に直結します。 自分もJavaScriptはTitanium Mobileで初めて触ったんですけど、 その後CoffeeScriptというものを触って感動しました。 hoge?.hogeでの安全なアクセスとかクラスとかが便利すぎです。 この本使ってます。 Titanium SDK バージョン:2.0.2 GA 前回のバージョンは1.7.5だったので、V8エンジンの恩恵もあり
第2回 TitaniumでTwitterクライアント | gihyo.jp
前回の記事で環境構築と土台となるプロジェクとの作成ができたので、今回から実用的なアプリの制作に入ります。数回にわけてTwitterクライアントを作成しますので、ネットワーク周りや画像の取り扱いまでTitaniumの簡便さを体験していただければと思います。 どんなものを作るか まずは、実際に作るアプリのイメージを固めましょう。TwitterアプリはiPhoneアプリの中でも優れたアプリが多く激戦区となっているジャンルです。一方でTwitterを使い込んでいくと自分のよく使うWebサービスと連携させたくなり、自分の使い方にカスタマイズしたアプリも欲しくなるものです。ということで、Twitterのひと通りの機能を実装しつつ拡張しやすいシンプルなアプリを目指しましょう。 図1 画面イメージ 画面構成としてはこのようなアプリをイメージしておきましょう。 まずはTableView Twitterアプリ
jQuery Mobile 1.1、正式版が早くも登場！
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar（固定ツールバー）のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
jQueryMobileを使ったチェックボックスの値をJavaScriptで操作するときの覚え書き - Output::Weblog
Mobile Safari上でjQueryMobileを使って <fieldset data-role="controlgroup"> <input type="checkbox" id="chk1" name="chk1" value="" class="custom" /> <label for="chk1">checkbox1</label> <input type="checkbox" id="chk2" name="chk2" value="" class="custom" /> <label for="chk2">checkbox2</label> </fieldset> のようなhtmlがあるとき、片方のチェックボックスがチェックされたら、もう片方のチェックボックスを未チェック状態にしたいとします。 普通だと、 $("input:checkbox").change(funct
そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.sawadaru.com/blog/?p=293
http://www.riaxdnp.jp/?p=3465