iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら？」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり（iPhoneエミュレータ上で動かす分には問題ないのですが…）と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識＋αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
スマフォ向けWebアプリの制作初心者が覚えておくと便利な小ワザ集1 | {M} 383blog
自分がスマートフォン向けのWebアプリを初めて作成したときにいろいろと調べたことを、メモ的に書いておこうと思う。スマートフォン向けのWebアプリ制作におけるJavaScriptやHTMLの基本的な小ワザをまとめた。これからスマートフォン向けのWebアプリを制作する人たちの参考になればうれしい。 アドレスバーを隠す [iOS, Android] ページを表示したときにブラウザ上部のアドレスバーを隠すことができる。スマートフォンのブラウザは表示領域が少ないため、アドレスバーを隠すことで画面を多少広く使える。 setTimeout(window.scrollTo(0, 1), 100); フルスクリーン表示かどうか調べる [iOS] Safariから「ホーム画面に追加」ボタンをタップすると、ホーム画面にそのページへのショートカットアイコンを追加することができる。追加したショートカットアイコンから
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
zepto.js — the aerogel-weight mobile javascript framework
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
PhoneGapを用いたHTML5/JavaScriptアプリの速度や機能を拡張する「Monacaフレームワーク」、オープンソースで公開
PhoneGapを用いたHTML5/JavaScriptアプリの速度や機能を拡張する「Monacaフレームワーク」、オープンソースで公開 HTML5/JavaScriptで開発したWebアプリは、PhoneGapを使うことでネイティブアプリ化できます。ただし、このネイティブアプリは基本的にHTML5/JavaScriptをラップしたものであるため、見かけや動作速度は基本的にWebアプリケーションのままです。 このPhoneGapを用いて開発されるアプリケーションに対してOSネイティブなコンポーネントなどを追加し、ネイティブアプリケーションと同等の高速な画面遷移やアニメーション、OSネイティブのツールバーやタブバーの利用、メニューボタンや戻るボタンなどのハードウェアキーの対応などを実現する「Monacaフレームワーク」をオープンソースとして公開することをアシアルが明らかにしました。iOSとA
ネイティブアプリのようなWebアプリを作るために
※image via 003 FREE WEB GRAPHICSデバイスの多様化に伴い、拡張性の高いWebアプリの重要性が見直されています。サイバーエージェントのデカグラフを構成するサービスも基本的にはWebベースで作られていますが、これはアプリの改善スピードを上げたり、各サービス間の回遊性を高めるという狙いもあるようです。 ただし、スマートフォンユーザーはネイティブアプリ先行でサービスに触れているため、これまでのWebアプリでは当たり前だったことが、今ではストレスに感じてしまうことも多いです。HTML5の登場やJavascriptのライブラリの充実などにより、最近ではリッチなWebアプリを作る環境が急速に整ってきてはいますが、それでもスマートフォン向けに満足度の高いWebアプリを提供するハードルは非常に高いと言えると思います。 そこで、「もっさり＆カクカク」な印象のあるWebアプリの操作
スマホ対応アニメーション支援ライブラリ - smart js
特徴 配置と動きに特化した Javascriptライブラリです。 シンプルで柔軟性もあり、 処理も高速です。 対応OS / ブラウザ iOS 7+ Android 4.1+△ Android 4.4+○ IE9+ Safari latest Chrome latest Firefox latest
『リッチスマートフォンWebアプリのメモリ管理』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、ピグディビジョンでフロントエンドのプログラムを書いています。maginemu (@maginemu) です。 どこでもピグライフとは弊社の提供しておりますPC向けソーシャルゲーム「ピグライフ」をスマートフォン向けに移植したサービスです。『ピグライフのお庭をスマートフォンでも』を目標に移植を行いました。 (「どこでもピグライフ」はPCで「ピグライフ」を開始し、「いちごジュースを作ってみて！」というクエストをクリアするとお使い頂けるようになります) PC版ピグライフはFlashでつくられていますが、どこでもピグライフはHTML5/CSS3/J
『スマートフォン向けブラウザゲームの開発について』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんばんは。アメーバ事業本部ピグディビジョン所属の久保です。 今回は6月5日にリリースいたしましたスマートフォンで遊べる「スマートフォン版ピグつりゲーム」(http://fishing.pigg.ameba.jp)の開発の一端をご紹介させていただきます。 スマートフォン版ピグつりゲームとは スマートフォン版ピグつりゲームとは、PC版アメーバピグの中で遊べるつりゲームをスマートフォンでも気軽に楽しんでもらえるように制作したブラウザゲームです。PC版はFLASHで動作しますが、スマートフォン版ではiPhoneの対応を考慮に入れてHTML/CSS/Java
flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです - pig's diary
iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください！ 公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。 デモページ がありますので、見てみてください。 http://stakam.net/jquery/flickgal/demo ※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。 実装のしかた 説明ページを見てみてください。 http://stakam.net/jquery/flickgal/ 基本的にはこんな風に実装する方式です。 いくつかのルールにそっ
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
第29回 HTML5とか勉強会に参加してきた #html5j - Diary of absj31
第29回 HTML5とか勉強会 : ATND 2012/05/16 第29回 HTML5とか勉強会 #html5j - Togetter (写真：渋谷ヒカリエ) 今回からは、最近増えて増えて仕方ないJavaScriptフレームワークをガンガン追求していきたいと思います。 今回と次回は、モバイルフレームワークに焦点を当てて紹介したいと思います。『JavaScriptモバイルフレームワーク』をテーマとして、前編/後編開催と銘打たれたHTML5とか勉強会。第29回の今回はその前編として位置づけられました。個人的にも興味深いテーマだったので告知待機し、速効申込みDone。この日参加してきました。 開催会場はDeNAヒカリエ会議室＠渋谷。最近移転した事自体大きなニュースになりましたが、やはり綺麗で羨ましい限りですね〜。地階から辿り付いたので2階に伸びている連絡通路経由で入ることは叶いませんでしたw(
初めてのHTML5ゲーム作成 4-5
名前: 石井 隆 性別: 男 年齢: 47才 (2011年1月現在) 【経歴】 大阪市立大学工学部修士課程終了後、(株)東芝に入社。 東芝ではオフィスコンピュータ/IAサーバー関連のハードウェア開発業務に15年程度従事。 現在は、東芝を退社し、フリーランスでソフト開発の請負やシェアウェア開発等を行っています。 【連絡先メールアドレス】 t-ishii@js2.so-net.ne.jp 当サイトでは、第三者配信による広告（Google Adsense社の広告）サービスを利用しています。 Google を含む第三者配信事業者は、Cookie を使用して、ユーザーのウェブサイトでの閲覧履歴に基づく広告を配信します。 Google 広告 Cookie を使用することにより、Google や Google のパートナーは当サイトや他のサイトへのアクセス情報に基づく広告をユーザーに表示でき
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った - かちびと.net
スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。[/note] サンプル ※Androidも動くらしいですが、僕が持っていないのでiPhone以外は動作確認していません。 サンプルにアクセスすると以下のような画面になります。 結構な数のサンプルが用意されているのですが、ここでは一部ご紹介したいと思います。 アコーディオン アコーディオンコンテンツです。タップで開閉します。 ページめくり ページめくりです。フリックすると本をめくるようなアニメーションエフェクトで次のコンテンツに進
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマフォ向けWebアプリの制作初心者が覚えておくと便利な小ワザ集2 | {M} 383blog
9leap : トップページ - どこでも遊べる、投稿型ゲームサイト