来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="f... 続きを読む
javascript, webdesign, webserviceLivedoorReaderPinCheckerLivedoorReader Pin Checker すっかり遅くなりましたが、LivedoorReaderPinCheckerの開発話の続きです。LivedoorPinCheckerの開発話 - そうだ?Blogを書こう?開発でも一番時間をかけた、UI関係の話... 続きを読む
Attach a function to iOS’s shake ? gShake | Webification iOSのシェイクイベントを取得できるjQueryプラグイン「gShake」。 このプラグインを使うことで、iPhoneをシェイクした際にブラウザ上でイベントを起こして処理を行うことができるみたいです。 iOS4.... 続きを読む
◆ iPhone の input 要素 input 要素の入力フォントサイズが小さいと、 input 要素にフォーカスした後 iPhone Safari が気を利かしてズームインしてくれます。なんですが、 input 要素からフォーカスが外れてもズームアウトしてくれないので input.text { -webk... 続きを読む
iPhone/AndroidでURLスキームを利用したアプリ起動 Check Tweet iPhoneのSafariやAndroidのブラウザなどからURLスキームを利用することで直接アプリを起動することができるようになります。 アプリにはそれぞれURLスキームが割り当てられています。例えばTwitte... 続きを読む
CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑... 続きを読む
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 <meta name="viewport" content="w... 続きを読む
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使... 続きを読む
ちょっと今回はまめ知識的な内容です。最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。(jQuery Mobileなどを利用した開発方法は置いといて)HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思いま... 続きを読む
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスラ... 続きを読む
資料として良さそうなのでエントリー。 Mobile Patternsでは、iPhoneaアプリのUIパターンを集めて掲載している。 スプラッシュスクリーンや、リスト、プロフィール画面など、よく使われれるUIごとに分類されているのが便利だ。 iPhoneやAndroidでアプリを作ると... 続きを読む
yamaokaです。 だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、... 続きを読む
かかえているサイトを急にスマートフォン対応して! なんて時に困らない様に、スマートフォン特有のデザインやユーザビリティ等、構築時に抑えておきたいサイト・記事を集めました。 半分位自分用メモですが、何かの役に立てば幸いです。 スマートフォン最適化... 続きを読む
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ! Webサイトの制作やソフトウェアを作成する際には、PhotoshopやGUIビルダ... 続きを読む
Posted by admin | Posted on 27-10-2010 Category : ソフトウェア Tags: Android, オープンソース, 開発, GPL v2, iPhone, JavaScript, jQuery, MIT License, Web jQuery MobileはJavaScript/jQuery製のオープンソース・ソフトウェア。iOS、特にiPhone/iPad用... 続きを読む
WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト(HTML)はそのまま利用し、CSSとJavaScriptだけでレイア... 続きを読む
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開!スマートフォンまっさかり!(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイ... 続きを読む
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 前回までに基本的なマークアップが完成したスマートフォンサイ... 続きを読む
iPhone特有の「タップ」や本体の「回転」は、JavaScriptでも取得することができます。 つまり、Webサイト・Webアプリでこれらのイベントを捕まえてプログラムを作ることができるという訳。 簡単なサンプルを作ってみましたので、お試しください。 iPhoneのタッ... 続きを読む
iPhone特有の操作としては、指で左右に弾くことで次のページ・前のページを表示できる操作があります。 前回のJavaScriptによるイベント取得と、jQueryおよび、Spry framework for Ajaxを組み合わせるとWebアプリでもこの操作が可能です。方法を紹介しましょう... 続きを読む
「WebサイトをiPod touchに最適化する方法の説明会」があったので、行ってきました。iPhone用Webページを作るとっかかり的な内容で終わりましたけど、これを足がかりにし、jQueryなんかと合わせて色々作ってみようと思ってます。以下、ひたすら箇条書き。なお、... 続きを読む
iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む Apple 公式 iPhone ウェブ開発ページ Apple が iPhone 用ウェブ開発ページを公開しました。(追記:Apple から日本語訳も出ました。) Apple Developer Connection... 続きを読む
iPhone向けサイト(Webアプリ)制作に備えてメモっておくことにします。 Web Apps Dev Center Universal iPhone UI Kit Yahoo! Design Stencil Kit and more… 追記 ブクマ代わりにここに追記していきます。 2008/08/26 - iPhone対応サイトの作り方 - iPhone3G ... 続きを読む
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、パソコン向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか? 今回は、弊社コン... 続きを読む
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone ... 続きを読む
iPhone向けWebアプリケーションの開発において、jQuery使いなら見逃せないプロダクト「jQTouch」のベータ版がリリースされた。同プラグインを使用すれば、ネイティブアニメーションを伴うWebアプリケーションでも簡単に開発できるようになる。jQueryベースのた... 続きを読む
jQuery on iPhone - jQTouchを使ったWebアプリ開発を参考にして、iPhoneのWebアプリを作成してみました。 jQTouchとは?名前を見て、想像が出来る通り、iPhone向けWebアプリを作るためのjQueryです。オフィシャルのjQtouchより、ダウンロードして使用することが... 続きを読む
いまや持っているのが当たり前になったiPod関連商品のUIをまねしてみましょう。 以前、「iPhone」風UIを実現するJavascript「iUI.js」でも紹介したUIをjQueryのプラグインjQTouchで実現可能になりました。 ※iPhoneやSafari 4 beta、WebKit搭載ブラウザなどでし... 続きを読む
ここのところ「iPhoneアプリのUIの大半(ひょっとしたらすべて)をHTML+JavaScript+CSSで作ることはできないか?」に挑戦している私。 そのためにまずは部品作りからとりかかっているのだが、昨日から今日にかけて作ったのは、プログレス・バー、スライダー、ト... 続きを読む
自分でもはまってしまったのでエントリー。 jQueryを使ってiPhone用のWebアプリケーション制作を行う場合の注意です。 今回はclickイベントを取り上げます。 例として、ここでは「ボタンをタッチしたら設定を保存させる際にclickイベントを利用する」としましょ... 続きを読む
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした! 待ってる間に、iPhone4も対象としたWEBアプリ(ネイティブアプリのweb view を含む) のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を対応させる... 続きを読む
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマート... 続きを読む
PC用のサイトにiPhoneでアクセスがあった場合にiPhone用のサイトに転送するというのはよくあるケースだと思います。更にiPhoneで「PC用」のボタンをクリックされた場合にPC用のサイトが閲覧できる.htaccessを考えてみました。 iPhoneからPC用のサイトへのリンク... 続きを読む
Moongiftさんの記事を見て興味が 沸いたので即DLしてみました。 iPhone等のモバイル向けのWeb アプリを構築するHTML5中心の フレームワーク・Sencha Touch。 個人的にはかなり良いオープン ソースでした。 という訳で、Sencha Touchを触ってみましたよ。これ使... 続きを読む
こいつは便利。メモ的にエントリーしておきますよ。iPhone用サイトをつくるときに使えるショートコードですね。 いくつかピックアップして紹介してみます。 <rel=\"apple-touch-icon\" href=\"images/template/engage.png\"/> ↑ iPhoneでのアイコン画像を指定... 続きを読む
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 基礎編 対象ブラウザは... 続きを読む