アイディアは紙から始まる。スマホ、タブレットなどに使えるワイヤーフレーム・テンプレートたち。 – TechDoll.
企画書も原稿も、まずアイディアを紙に書き出すことから始める。そうすることで散らばっていたアイディアが洗練されてまとまっていく。スマホアプリ、ウェブサイト、タブレットのデザインを考えるときも紙から始めるとはかどるよね。 今回はそんなワイヤーフレームの作成に便利なテンプレートをご紹介。UI STENCILSは各デバイスのスケッチブックやステンシルを販売しているおすすめサイト。 UI Stencils Browser Sketch Pad. from Design Commission on Vimeo. Pad Sketch Sheets iPadのスケッチシート。簡単なスケッチはグリッドなしバージョンで、詳細スケッチはグリッドありを活用して。 iPad Idea Sheet 日本語のサイト。原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の3種類。画面内で縦横
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
Using the PopoverView in iPad App Development - mobiForge
In the previous article, we saw how to develop a new type of application known as the Split View-based application on the iPad. And one of the new views introduced for the iPad is the PopoverView, which you had a quick glimpse of it in action in the previous article. In this article, I will show you how you can use the PopoverView in your iPad application, not just in a Split View-based applicatio
Using the PopoverView in iPad App Development [Smartphone-Zine]
iPhoneとiPadでの大きなUIの違いであり、iPadに特有のユーザインタフェースであるポップオーバーはどうやって実装しているのだろうか？ サンプルプログラムにポップオーバビューを実装していく。これにより理解を深めていきたい。 ではまず、新しいプロジェクトを作成する。Split View-based Applicationを選択する。 このとき、Use Core Data for storageにチェックを入れる。 プロジェクトを作成したら、早速実行してみよう。左上のボタンをクリックしてほしい。 既にポップオーバービューが実装されている。 さらにポップオーバービューを追加してみる。ビューにボタンを追加し、このボタンをクリックするとさらに詳細のポップオーバービューが表示されるようにする。 まず、ビューを追加する。新規ファイルの追加で、UIViewController subclass
Popovers | iPad Techfirm Lab
popoverは表示中の画面の上にメニューやリストなどを簡単に表示できるビューコンポーネントです。 Popoverの使い方 PopoverはUIPopoverControllerが実現してくれます。 UIPopoverControllerは他のUIViewControllerを表示するコンテンツとして変数に保持します。なので、iPhone用に作成済みのUIViewControllerをそのままPopover表示することが簡単にできます。 簡単にPopoverを表示するために、UIImagePickerControllerをPopoverで表示してみます。以下のメソッドはツールバーに配置した”Popover”ボタンを押された時に呼ばれるメソッドです。 - (void)popover:(id)sender { if (!popover) { UIImagePickerController *
人気のUIを真似る。Flipboard風iPadアプリモックアップ·FlipView MOONGIFT
FlipViewはFlipboard風のUIを実現するiPadアプリモックアップ。 FlipViewはiPad用のオープンソース・ソフトウェア。iPadやiPhoneアプリでは同じ素材を使っていても見せ方一つで魅力が大きく変わってくる。ただ一覧にするだけでは面白くなく、さらにタップして表示を切り替える際にもアニメーションがあるかないかで印象が変わってくる。 一覧ページ Twitterのストリームの見せ方を電子書籍風にし、インパクトあるものにしてくれるFlipboard、これも見せ方を工夫した面白いアプリの一つだ。そんなFlipboard風の表示を実現しているモックアプリがFlipViewだ。 FlipViewはTwitterのタイムラインを表示しているが、画一的に一覧にしている訳ではない。高さを変えたり、2カラムで並べて表示することで見た目を楽しいものにしている。各ツイートをタップすると拡
iPad最適化サイトの表示確認に使える？Webブラウザの中のiPadブラウザエミュレータ·iPad Peek MOONGIFT
iPad PeekはWebブラウザの中でiPadのブラウザを再現する簡易エミュレータ。 iPad PeekはJavaScript/HTML5製のオープンソース・ソフトウェア。iPad向けの最適化サイトを開発する際には何らかのエミュレータが欲しいだろう。Macを使っている人であればiOSシミュレータを使うのが最もシンプルな方法だ。だがWindowsではどうしたら良いだろうか。 横向き表示 iPadの実機を使っても良いが、それではデバッグがしずらい。特別なソフトウェアを使わずに簡単に見た目を確認したいならiPad Peekを使ってみよう。 iPad PeekはWebブラウザの中にiPadを再現するソフトウェアだ。iPad用のSafariを再現しており、アドレスバーと検索用のテキストボックスが両方利用できる。クリックするとソフトウェアキーボードが出てくる凝りようだ（ただしソフトウェアキーボードは
Apple公式のUIを真似る。Keynote for iPad風UIのモックアップ·HSImageSidebarView MOONGIFT
HSImageSidebarViewはKeynote for iPad風のUIを実現するモックアップアプリ。 HSImageSidebarViewはiPad用のオープンソース・ソフトウェア。iOSを最も良く知っているのは誰かと言えば、Appleを置いて他にないだろう。OS自体やiPhone、iPadという筐体についても知り尽くしているので、彼らが作るアプリはさすがと思わされるものが多い。 縦型 操作性はもちろん、ボタンの配置についても使いやすいように並べられている。そんな彼らのアプリのUIを真似れば、ユーザビリティの高いアプリが作れるかもしれない。その一つとしてHSImageSidebarViewを紹介しよう。 HSImageSidebarViewはiPad用Keynote風アプリのモックアップだ。左側にサムネイル画像が並び、右側にスライドのコンテンツが表示される。スライドにあるボタンを押
iOSアプリをMac OSXにも利用する·Chameleon MOONGIFT
ChameleonはiOS向けのコードをMac OSXアプリにも転用できるようにするプロジェクト。 ChameleonはMac OSX用のオープンソース・ソフトウェア。iOSとMac OSXは同じObjective-Cを使ってアプリの開発が出来る。元々Mac OSXのサブセット＋αという雰囲気に見えたiOSだったが、実際には独自の機能、コンポーネントが多数利用されている。 デモアプリ そのためiOS向けに開発したアプリのUIをMac OSX用アプリに転用するのは困難だ。しかしそれを実現するために行われているプロジェクトがChameleonだ。 ChameleonはiOSコンポーネントをMac OSXでも使えるようにすべく開発が進められている。これによってiOSアプリからMac OSXに入った開発者が、iOSアプリを少ない修正でMac OSXアプリにし、使ってもらえるようになるのだ。 デモア
iPhone/iPadで使えるHTMLソースビューワー·Snoopy MOONGIFT
SnoopyはJavaScript製のフリーウェア（ソースコードは公開されている）。iPadやiPhoneの最適化サイトを構築していて面倒なのが、HTMLソースの閲覧機能がないことだ。シミュレータですら閲覧できないのでデバッグがしづらい。ユーザエージェントを変えればPCからでも見られるが、完全に真似する訳ではない。 プロパティ 必要なのは、iPhone/iPad上でその場でHTMLソースを見る機能だ。今表示されている内容をそのままソース表示する、そんなブックマークレット型ソフトウェアがSnoopyになる。 Snoopyは自分でサーバを立てても良いし、Snoopy配布サイトにあるブックマークレットを使っても良い。いずれにしてもiPhone/iPad上で実行するとフローティングウィンドウが表示される。文字コードやHTML構成についての情報が閲覧できる。 こちらは生成されたHTMLソース そして
モバイル開発に欠かせないテストツール14選
Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし
再現性が高くて面白い！WebベースのiPad·iPad Simulator MOONGIFT
iPad SimulatorはWebブラウザ上でiPadを再現するソフトウェア。 [/s2If] iPad SimulatorはPHP製/Webベースのフリーウェア（ソースコードは公開されている）。iPhone向けのWebサイトは増えてきたが、iPad向けとなるとまだそう多くはない。iPadがいくらPC向けサイトを見られるからといって、問題がないかと言われるとそうでもない。 ホーム画面。どう見てもiPad 例えばECサイトなど、購入に携わるまでのステップがiPadで使い勝手が悪いと機会損失につながる恐れもある。そこでiPad用のWebサイトを構築する時に使えそうなのがこのiPad Simulatorになる。 iPadのシミュレータと言えばAppleが公式に提供している。だがあればMac OSXがなければ使うことが出来ない。対してiPad SimulatorであればWebサイト限定ながらiP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
企業・学校向けiOS管理ツール、無料公開
iPhone や iPad の画面サイズ早見表 : iPhone プログラミング
IDEA * IDEA