日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。

この度、弊社にてスマホアプリ「ベストクレカ」 iphone版とandroid版を同時リリースしました。 同時リリースできたのは、 Titanium mobileという一粒で二度おいしいツール(one source multi use)のおかげです。 こう書くと、なんとなく 「iphoneアプリ作ったら、自動的にandroidアプリもできてる!すげぇ」 と思うかもしれませんが、iphoneとandroidでAPIも違うし、UIの基本思想も違うので、 ソースコードは、iphoneの場合、androidの場合という切り分けがちらほらでてきます。 正直、このTitanium mobile・・・・バグにも泣かされたり、iphoneとandroidで挙動が違ったり、OSのバージョンで挙動が違ったりと苦労が耐えませんでした。枕を濡らしながらもうTitaniumなんか!と思うこともありましたが、海外
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル(iPhone/Androidでもご覧いただけます) jQuery.flickSimple ダウンロード(github) これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
なかなか良さ気だったので備忘録。 iPhone、AndroidやiPadなどの人気 のタッチデバイス用に作られたギャラ リー用のJSライブラリ・PhotoSwipe。 人気のプラグイン、jQueryMobileでも 利用することが出来ます。 タッチデバイス専用とあって、独自の操作でもある、ピンチイン/アウト等による拡大や回転、フリックで進むなどの操作が可能です。 PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhon
スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。[/note] サンプル ※Androidも動くらしいですが、僕が持っていないのでiPhone以外は動作確認していません。 サンプルにアクセスすると以下のような画面になります。 結構な数のサンプルが用意されているのですが、ここでは一部ご紹介したいと思います。 アコーディオン アコーディオンコンテンツです。タップで開閉します。 ページめくり ページめくりです。フリックすると本をめくるようなアニメーションエフェクトで次のコンテンツに進
これはスマートフォンに限定した話になってしまうかもしれませんが、 コンテンツの領域が端末の縦幅より長いときってフリックやスワイプ操作でスクロールしますよね。 iPhoneやAndroidのブラウザで横向きにしたときは ファーストビューのエリアが狭いのでアドレスバーがすごく邪魔でちょっと不親切。 ユーザビリティを考慮したサイトには必ずといっていいほど、 初期時にブラウザのアドレスバーを隠してあげる工夫がされています。 やることは単純。 window.onloadか、jQuery使ってれば$(document).readyとかで1px移動しておくと、 ブラウザの仕様でバーの高さ分引っ込めてくれます。 人のやつ参考にしてみたけど、こんなんでいいのかな。。 iPhoneは読み込み遅延のせいでsetTimeout使わないとうまく反映されなかったです。 一応、両OSで動くのは確認
The document discusses various techniques for developing mobile web applications, including: 1. Using viewport meta tags to control layout on different screen sizes. 2. Storing cached content in Web Storage instead of cookies for better performance on mobile. 3. Loading images lazily via Ajax to improve perceived performance. 4. Detecting device orientation changes and resizing content appropriate
これはちょっと使いたいかも。Canvasを手軽に扱えるライブラリです。 iPhone,iPad,Androidで動くように最適化されているので、スマートフォン用のHTMLアプリを作る際に便利ですね。 コードは以下にご紹介。 var interval_1=0; function startShow() { var r = Math.floor(Math.random() * (254)); var g = Math.floor(Math.random() * (254)); var b = Math.floor(Math.random() * (254)); var x = Math.floor(Math.random() * (439)); var y = Math.floor(Math.random() * (554)); fillStyle = "rgba("+r+", "+g+",
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く