[JS]iPhone, iPad対応、パネルを雑誌のようにぺらっとめくるスクリプト -FlipPage
FlipPage 右端がぺらっとしてますが、キャプチャだと分かりにくいですね。 [ad#ad-2] FlipPageの実装 HTML 画像を配置したdiv要素をdiv要素で内包します。 <div id="exemples"> <div><img src="img1.jpg" style="margin-left: 0px;" /></div> <div><img src="img1.jpg" style="margin-left: -250px;" /></div> <div><img src="img2.jpg" style="margin-left: 0px;" /></div> <div><img src="img2.jpg" style="margin-left: -250px;" /></div> <div><img src="img3.jpg" style="margin-le
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
PhoneGapでiPhoneのカメラアプリを作ろう (1/5)
HTMLやCSS、JavaScriptといったWeb技術でスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、PhoneGapでiPhoneのカメラ機能を使う方法を紹介します。 PhoneGapのカメラ機能は非常にシンプルで、背面のメインカメラで撮影するだけですが（カメラの切り替えはできない）、撮影した画像データはJavaScriptで自由に処理できます。画像をCanvasに描画して特殊効果（エフェクト）を施せば、ちょっとした加工機能付きのカメラアプリも作れます。 今回は、撮影した写真をページ内に次々と追加するアプリを作成してみましょう。今回のサンプルはカメラ機能を使うので、iOSシミュレータでは動作しません。また、カメラ機能がない初代iPadではエラーになり、動作しません。 Capture APIとCamera API 最近のPhoneGapでは、W3Cで仕様策定
【第二弾】パソコンなしでここまでできる！「使える画像」を作るiPhoneアプリ１１選！ - ライフハックブログKo's Style
以前紹介した パソコンなしでここまでできる！「使える画像」を作るiPhoneアプリ３３選！ が好評だったので、第二弾としてあれこれ紹介します。 iPhoneだけでも（むしろパソコンよりも？）、かなり簡単に高度な画像加工ができますよ！ ※価格は各自ダウンロード前に確認ください。 Bokeh Booth 1.1（￥115）Bokeh Booth 1.1 カテゴリ: 写真 価格: ￥115 更新: 2011/06/09 写真に「ボケ」を入れられます。 「ボケ」は星型やハート型などあり、使い方次第でとても可愛い画像をつくることができます。 指でなぞった部分はクリヤになります。 Photo Mosaica 1.1（無料）iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要 Photo Mosaica 1.1 カテゴリ: 写真 価格: 無料 更新: 2011/06/2
iPhone版『ラブプラスi』の神アップデートでＧＰＳを使ったおでかけモードが追加！ : はちま起稿
iPhone版『ラブプラスi』の神アップデートでＧＰＳを使ったおでかけモードが追加！ 2011年07月15日14:30 ラブプラス コメント( 52 ) Twitter はてなBM ラブプラスiがアップデート！ 861 名前： 名無しくん、、、好きです。。。 投稿日：2011/07/15(金) 10:57:03.14 ID:y4OU3cEh [1/2] ラブプラスiの更新でおでかけモードが追加か。 643 名前： 名無しさん必死だな 投稿日：2011/07/15(金) 12:13:24.00 ID:ZWYoyEwmP [1/2] ラブプラス神アップデートきたあああああああああ 663 名前： 名無しさん必死だな 投稿日：2011/07/15(金) 12:14:32.68 ID:zYYSegZX0 [18/23] 楽しそうだな 665 名前： 名無しさん必死だな 投稿日：2011
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry
どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこういうのは助かりますね。 iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。 見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。 表示確認 Media Queries Testerでのキャプチャです。 Mobilizerでのキャプチャです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery
マス目状の画像ギャラリーを作成できるjQueryプラグイン「Mosaiqy: a nice jQuery plugin」
twitter facebook hatena google pocket 画像ギャラリーを使用する際に、多くの画像を一覧で見せたいという希望があるかもしれません。 従来までのものだと、初期時にあまり多くを非表示できませんでした。 そこで、一度に多くの画像を見せられるjQueryプラグインMosaiqy: a nice jQuery pluginを紹介します。 sponsors 使用方法 Mosaiqy: a nice jQuery pluginからファイル一式をダウンロード。 まずhead内に下記を記述します。 <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE
スマートフォン用画像ギャラリーの決定版「PhotoSwipe」
twitter facebook hatena google pocket スマートフォンサイトでの画像ギャラリーを作る時PhotoSwipeを使用すると、ごくごく簡単です。 もちろんJavaScriptですのでappleのiPhone、iPadもOK。 また、Swipeの名の通り指で左右にやることで次の画像を見ることも可能です。 sponsors 使用方法 PhotoSwipeからファイル一式をダウンロードします。 <link href="photoswipe.css" type="text/css" rel="stylesheet" /> <style>#Gallery{display:none;}</style> <script type="text/javascript" src="simple-inheritance.min.js"></script> <script type=
iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ
iPhone･iPadのWebアプリケーション開発を相変わらず研究しています。 最近のiPhone･iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ（本当に）ガッツリ研究していこうと思います。 と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。 そこで、jQueryでもCarousel風のUIをサクサクッと作れ
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
iPhoneアプリ「PictShare」が神アプリな4つの理由
素晴らしいアプリのことを「神アプリ」と安直に言うのは嫌いなんです。なんか安っぽく聞こえるじゃないですか。 だがあえて言いましょう。PictShareは神アプリ。少なくとも、私にとっては。 Evernoteでログを漁ってみたところ、「PictShareすげえええ」と1月4日につぶやいておりました。 あの「そら案内」などで知られる@itok_twit さん作成の「PictShare」は、複数の写真を様々な写真共有サービスに簡単にアップロードできるアプリです。 PictShare – multiple photos uploader 1.4.1 iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要 カテゴリ: ソーシャルネットワーキング 価格: ￥230 更新: 2011/03/22 リリース後すぐに購入し、「すげえええ」とつぶやいているにも関わらず、なぜか私、
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった - テクメモ
iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。 ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。 現在はアルファ版として公開中。 デモ デモ（ページ全体） ダウンロード コードサンプル ページ一部をフリックできるようにする場合。 $('.selector').flickable(); ページ全体をフリックできるようにする場合。 $(window).flickable(); ページ区切りを作る場合。sectionオプションでセレクタか要素を指定します。 $('.selector').flickable({ section: '.content' }); オプションの取り方などを含め、jQuery UIと同じような実装にしています。 詳しくは、http
驚愕の記録を出したiPhoneアプリ！癒し系天気サービス「美人天気」 : ITライフハック
2011年01月26日18:00 驚愕の記録を出したiPhoneアプリ！癒し系天気サービス「美人天気」 カテゴリモバイル ビジネスユーザーだけでなく、学生や主婦、OLさん、おじいちゃん、おばあちゃんも、明日の天気が気になる人は多いだろう。インターネットに接続できる環境があれば簡単に天気を調べられるが、iPhoneユーザー、とくに男性諸君の中には、「美人のおねーさんで癒されたい！」と思っている人も多いはずだ。そんな男心をガッチリとつかんだiPhoneアプリ「美人天気」が驚愕の記録を樹立した。 ドワンゴは1月17日にサービスを開始した、「天気」と「美人」を組み合わせた天気サービス「美人天気」のiPhone アプリ版が公開1週間で20万ダウンロードを突破したことを明らかにした。 さて、「美人天気」を知らない人のために、簡単に紹介しておこう。 「美人天気」は、「どうせ天気を見るなら楽しく見たい！」
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap
[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap real time heatmap デモ [ad#ad-2] デモの画像の上でマウスを動かすと、その動いた量に伴いカラーがブルー、グリーン、イエロー、レッドとマウスの移動し滞在した量をヒートマップとして生成します。ヒートマップのデータはエクスポートも可能です。 また、iPhoneのシングルタップもサポートしている、とのことです。 スクリプトはjQueryなどの他のスクリプトは依存せず、下記のようになります。 JavaScirpt /* Copyright (c) 2010, Patrick Wied. All rights reserved. Code licensed under the BSD License: http://patrick-wied.at/static/li
iPhoneの内で使われている絵文字、ボタン画像ジェネレータ·UIKit-Artwork-Extractor MOONGIFT
UIKit-Artwork-ExtractorはiPhone内の画像をエクスポートする。 UIKit-Artwork-ExtractorはiPhoneシミュレータ用のフリーウェア（ソースコードは公開されている）。iPhoneには絵文字の表示機能がある。これは日本のサービスから取り入れられた仕様だ。メールが華やかになり、女性にウケが良い機能だ。数百種類の絵文字が存在する。 アートワーク そんな絵文字は他のサービスで使ったり、自分のアプリ内でも取り込んでみたいと思うかも知れない。そのためにはiPhone内の絵文字を取り出さなければならない。そこで使うのがUIKit-Artwork-Extractorだ。 UIKit-Artwork-Extractorはシミュレータで動作するソフトウェアだ。起動すると各ジャンルごとに絵文字が一覧で表示される。さらに記号やアイコンも一覧になっている。それぞれ個別に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]大量ページの本やマンガをiPad/iPhoneで表示できる -Diva.js
ゆーすけべー日記