はてなブログAndroidアプリ開発の舞台裏 - Hatena Developer Blog
こんにちは！はてなでスマートフォンアプリを開発している id:cockscomb です！ 先日リリースした はてなブログのAndroidアプリは、Android 5.0 Lollipopに対応し、Googleの新しいデザイン言語 Material Design をいち早く取り入れるなど、はてなが提供しているAndroidアプリとして様々な面で新しいものとなりました。まずは、Androidスマートフォンをお使いの皆さまにご利用いただけたら幸いです。いまならキャンペーンも実施中です。 はてなブログAndroidアプリ さて、この新しいアプリですが、その開発においてもモダンな手法を多く取り入れています。本記事ではその開発について、順を追ってご紹介します。 企画・プロトタイピング はてなブログAndroidアプリの開発に着手したのは、ちょうどGoogle I/Oのキーノートが行われた、今年6月26
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク·ChocolateChip MOONGIFT
ChocolateChipはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア（BSD License）です。 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版とも言えるChocolateChipを紹介します。 例えばこちらはiPhone風。iOS 7に似ています。 同じ内容でAndroid風。 こちらはWindows Phone向け。 Todoなどで使えるリスト。 同じ表示もAndroid風にすると印象が随分変わりますね。 AndroidでスイッチUI。 iPhoneでレンジ。 削除できるリスト。 ポップアップ。 ポップオーバー。 タブバー。 ページネーション。 シート。半透明なのがiOS 7に似ていていい感じです。 リスト。サムネイル付きです。 アイコン付きリスト。 ChocolateChipはiOS 7風UIに対
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
これでテストの為にAndroidを沢山買わなくていいかも。Androidアプリの実機テストをリモートで行えるサービスを試してみた
レーベでもAndroidアプリの開発を行っていまして、最近ではカメラアプリを開発しました。沢山ダウンロードされると「○○で動かない」といったレビューがGoogle Playに入る事も多々あり、逐一各機種でテストする必要があります。 最近まで私たちも実機を事あるごとに購入していたのですが、良いレンタルサービスを発見したので、簡単な動作検証の場合は実機を買わずに済ませるようになりました。 Remote Testkit for Androidについて http://appkitbox.com/testkit Remote Testkit for AndroidとはNTTレゾナントが提供するリモートによるスマートフォン実機検証のためのサービスです。端末のレンタルはチケット制で3チケットで30分利用可能となっています。6チケット（1時間分）945円（税込）で販売しています。 エミュレータではなく、実
短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？ まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO
ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
寸法と解像度のチートシート
その他の寸法 ハガキ … 148 mm × 100 mm (A6 より横が 5 ％程度短い) 名刺 … 91 mm × 55 mm (B8 より横が 1 割程度短い) レター … 279 mm × 216 mm (A4 より縦が 1 割程度短く，横が数％長い) 新聞 … 開いた状態で 813 mm × 546 mm (A1 に近いが少し小さめ) クレジットカード … 85.6 mm × 54.0 mm 磁気カード … 85.0 mm × 57.5 mm テレホンカード … 86.0 mm × 54.0 mm CD … 直径 120 mm (穴は直径 15 mm，印刷可能範囲は直径 46 〜 116 mm の範囲) 証明書の写真の寸法 パスポート … 縦 4.5 cm × 横 3.5 cm 履歴書，TOEIC … 縦 4 cm × 横 3 cm TOEFL，英検 … 縦 3 cm × 横 3
スマホがあんまり普及すると、モバゲーとグリーは大変かも。：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ
スマホがあんまり普及すると、モバゲーとグリーは大変かもです。SAPのみんなは知っている話なんですけど、日経にも書かれたので、適当に書きます。 理由は、スマホのネイティブゲームの課金は、30%がAppleやGoogleさんが上納金を持っていくからです。現在、独自課金はマーケットから即刻追放されることになってます。その上さらに、結構な上納金をモバゲー・グリーさんが持っていくので、SAPは、ほぼ損します。つまり、作る意味が無いのです。SAPに残された道は、以下の二つです。 (A)グリモバ無しで、AppStoreやGoogle Playにアプリ配信。 (B)このままHTMLベースのゲームを作り続ける。 どっちがいいのかと言われたら、どっちもどっちです。 パズドラがパンドラの箱を開けてしまった： 「ソーシャルゲームって、集客が大変だねー、モバグリの集客力に頼るしかないよねーっ」て思っていたら、ガンホ
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')); }) });
短期間でのスマホ向けWeb開発
スマホアプリ開発者向け IDCFクラウド活用セミナー 2012年6月14日(木)18:30～ ＠IDCフロンティア ～『短期間でのスマホ向けweb開発について』～ セミナー資料Read less
アプリの終わりの始まり
2012年2月27日から3月1日にかけてバルセロナで開催されたMobile World Congress 2012では、特に注目の集まったGoogleやFacebookのキーノート以外にも示唆に富んだ興味深いセッションが多数あった。その中の1つがコンサルティング会社frogのScott Jenson氏によるプレゼンテーションであった。同氏が各地で行っているというプレゼンテーションは“Mobile Apps Must Die”というラディカルなタイトルだが、筆者は大いに共感でき、多大なインスピレーションを受けた。本稿では、同氏の論旨に依拠しつつ、アプリ環境の今後を展望する。 「アプリの海」 現在、AppleのApp Storeでは50万以上、Google Play（旧Android Market）では40万以上のアプリが提供されており、この数は日々増加を続けている。これらに加え、Window
iPhoneでのHTML5の実行速度はPCの6分の1、Androidはさらに劣る
HTML5アプリがモバイルアプリ開発者の注目を集めるなか、HTML5のパフォーマンスに関するレポートが5月22日(米国時間)に発表された。それによると、「iPhone 4S」「GALAXY S II」といった最新のスマートフォンにおけるHTML5の実行速度は、PCにおける実行速度に比べて最低でも6倍は遅く、場合によっては1,000倍以上遅いこともあることがわかった。 この調査は、米Spaceportがオープンソースのベンチマークスイート「Perfmarks II」を用いて、スマートフォン(iPhoneとAndroid端末)とノートPC(「MacBook Pro」)上でのHTML5の動作について比較、ネイティブに近いフレームレートとされる30fpsでのパフォーマンスを調べたもの。 OSはAndroid 4.0.3、同4.0.4、iOS 5.1、同5.1.1、Webブラウザはモバイル版の「Go
ke-tai.org > Blog Archive > Android端末のブラウザ仕様やバッドノウハウをまとめたスライド資料「スマートフォンブラウザ不具合特集」
Android端末のブラウザ仕様やバッドノウハウをまとめたスライド資料「スマートフォンブラウザ不具合特集」 Tweet 2012/5/7 月曜日 matsui Posted in Android, 記事紹介・リンク | No Comments » GWを挟んでしまい更新しそこねたので、少し前のものになってしまいますが、Android端末のブラウザ仕様やバッドノウハウをまとめた「スマートフォンブラウザ不具合特集」という良いスライド資料がありましたので、ご紹介させていただきます。 スマートフォンブラウザ不具合特集 View more presentations from Hiroaki Wakamatsu Android（一部iOS）のブラウザの不具合と、その回避方法がまとめられています。 実際にHTMLコーディングを行う現場の方々にとって、これは大変に貴重で役に立つ資料ではないでしょうか。
jQueryを使ってのドラッグ＆ドロップUIをiPhoneやAndroidでも簡単に動作するようにしてくれるプラグイン「jQuery UI Touch Punch」｜BLACKFLAG
先日ここでも紹介したjQueryを使ってのドラッグ＆ドロップUI。 通常jQueryでドラッグ＆ドロップを実装するには「jquery-ui.js」を使って 「.draggable()」「.droppable()」といったアクションを使って操作しますが これらはiPhoneやAndroidには対応していません。 そこで、これらの「.draggable()」「.droppable()」ドラッグ操作を 簡単にiPhoneやAndroid対応にしてくれるプラグイン「jQuery UI Touch Punch」が かなり使えそうだったので自分用メモ書きとして紹介してみます。 jQuery UI Touch Punch – Touch Event Support for jQuery UI jQuery UI Touch Punch – Touch Event Support for jQuery U
新日鉄ソリューションズがHTML5スマホアプリ開発基盤「hifive」をOSSとして公開
新日鉄ソリューションズは2012年4月27日、同社が開発してきたスマートフォン／タブレット向けHTML5アプリケーション開発フレームワーク「hifive」をオープンソースソフトウエア（OSS）として公開した。hifiveの公式サイトも開設、マニュアルやチュートリアル、サンプリアプリも公開した。 hifiveは同社のシステム研究開発センターが開発した。スマートデバイス固有の開発知識を必要とせずに、パソコンとスマートフォン、タブレットに対応したアプリケーションを開発できるとしている。またHTML5により、アニメーションやグラフをWebブラウザ上で表示できる。 サンプルアプリとして、jQuery Mobileと連携したYouTube検索、jQuery UIと連携したダイアログ表示（写真1）やドラッグ＆ドロップ、HTML5APIを使用したWeb SQLデータベースやWebストレージ、HTML5のc
スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
心地よさを目指した布やゴムのようなツクロアのドロワーUI | 株式会社ツクロア