スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
ギャップロ - アプリエンジニアのための技術情報サイト -
デバイス/ツールレビュー 複数プロジェクトを行き来する人の便利Tips 今回はAndroid、iOSアプリを複数プロジェクト抱える場合の便利Tipsを記事として残しておこうと思います。ちょっとしたことですが、まだ知らない方のきっかけになればと思います。 モチベーション 業務がこなれてきて複数... 2024年5月20日 モバイル 【Android JetpackCompose】 縦幅の狭い外枠つき入力フォームを作る はじめに 今回はJetpackCompose、material3のコンポーネントのひとつ、androidx.compose.material3.OutLineTextField（以下OutLineTextField）につ... 2024年4月30日 モバイル try! Swift Tokyo 2024 に参加してきた（三日目） はじめに Hello, Swift ラバーなみなさ
Our Mobile Planet
モバイルユーザーについてもっと知りたくありませんか? Our Mobile Planet がお答えします。 40ヶ国におよぶスマートフォン利用の実態が分かります。また、モバイルユーザーについての深い洞察とモバイル戦略立案のためのデータの収集に役立つさまざまなチャートを自由に作ることができます。 グラフを作成
「HTML5によるタフなモバイル開発の最前線」by DeNA @tkihira - 蒼の王座・裏口
HTML5 Conference 2012で実施された株式会社ディー・エヌ・エー紀平 拓男さんによるセッションが、とても楽しかったのでまとめてみる。 セッション概要セッション概要には、次のような説明が記載されていた。 スマートフォンにおけるHTML5を用いた開発における現在の最前線の話をDeNAにてHTML5の技術開発を総括している立場より、具体的なノウハウを交えてお話しします。 DeNAの紀平さんはExGameを作った人。 ExGameは、FlashをHTML5のCanvasとJavaScriptへの自動変換してくれるライブラリ。 再現率は他のライブラリよりも高いらしい。 そんな人が、DeNAでHTML5を統括しているから、間違いなく実践的な話になると期待していたし、 実際に期待以上だった。 株式会社ディー・エヌ・エー 紀平 拓男さんTwitter：http://twitter.com/
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
タッチイベントのエミュレートが出来るブックマークレット「Phantom Limb」 | Web活メモ帳
モバイルアプリケーションを作る際には出来るだけ開発環境でデバッグを行いたいですよね？ 本日紹介する「Phantom Limb」はブラウザ上でタッチイベントをエミュレートしてデバッグを助けてくれるツールです。 リアルな指がマウスで操作できるようになり、ボタンの押しやすさや指で隠れても操作しやすいかなど確認できるようになります。 使用には以下のブックマークレットを保存して実行ください。 ブックマークレット すると、ブラウザ上でカスタムタッチイベントを送る事ができるようになります。 使ってみた様子 試しに当サイトで実行してみました。 指でタッチする際にはボタンが見えなくなったり、サイズ指定に悩んだりしますよね。 実際の指の大きさに近いので、モバイルアプリ開発が少し楽になりそうです。
mixi Engineers' Blog » スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
こんにちは、寝過ごして長野まで行きそうになったソーシャルクライアント開発のtakimoこと瀧本です。 先週弊社数名がアメリカで行われていたVelocity 2011 - O'Reilly Conferencesに参加しました。 そこではモバイル端末のテストやパフォーマンスについての講演やLTがあったようです。 自分もお土産話を色々聞きたいので詳しくは誰かが書いてくれるはず...です。 その中で気になったプロダクトがあったので紹介したいと思います。 weinre - Web Inspector Remote weinreはFirebug(Firefox)やWebKitのWebInspectorのようなデバッグ機能をリモートで提供してくれるプロダクトです。 iPhoneやAndroid(2.1以上)には一応コンソール機能のようなものがありますが 基本的には出力だけ ソフトキーボードでデバッグ用
スマホのUI考２ 〜 フィードバックについて | fladdict
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（後編） Google I/O 2011
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（後編） Google I/O 2011 モバイルアプリケーションを開発する方法として、JavaやC/C++とSDKを用いてネイティブアプリケーションを開発する以外に、HTML5/CSS/JavaScriptを用いて開発する方法が登場してきています。 この2つのアプリケーション開発にはどのような違いや利点があるのでしょうか？ Androidを題材にして解説したセッション「HTML5 versus Android: Apps or Web for Mobile Development?」がイベントGoogle I/O 2011で行われました。 （この記事は「HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（前編） Google I/O 2011」の続きです） ネイティブアプリケーションを開発する理由 Re
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（前編） Google I/O 2011
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（前編） Google I/O 2011 モバイルアプリケーションを開発する方法として、JavaやC/C++などのプログラミング言語とSDKを用いてネイティブアプリケーションとして開発する方法以外に、HTML5/CSS/JavaScriptを用いて開発する方法が登場してきています。 この2つのアプリケーション開発にはどのような違いや利点があるのでしょうか？ Androidを題材にして解説したセッション「HTML5 versus Android: Apps or Web for Mobile Development?」がイベントGoogle I/O 2011で行われました。 HTML5でモバイル開発を行う利点 Reto Meier氏（左）、Michael Mahemoff氏（右）。
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
スマートフォンサイトの作成術 - 大川洋一
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
スマートフォン向けサービスにおける、Yahoo! JAPANのオープンソース活用事例
Start OSS Contribution With What You Know / できることから始める OSS ContributionRyo Shibayama
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイル開発についての調査
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android