『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
iOSの開発をする上で絶対に使うべき！外せない！webサービス、開発ツール集
by @mixiappwchr iOSで開発する上で見ておくべきサービスやツールをまとめてみました。 ほかにもたくさんあると思いますが、基本的なやつを集めました。 アプリ配布 depolygate https://deploygate.com/?locale=ja 旧TestFlightがオワコンのため、今ではDeployGateを使うしかありません！ まだTestFlight使ってたの？急げ！終了目前のTestFlightから,今すぐにiOSもDeployGateに移行しよう！移行パターンも紹介するよ。 CI Circle CI https://circleci.com/ iOS対応されアプリもクラウドでCI クラッシュログ Crittercism https://www.crittercism.com/ ユーザービリティテスト Repro https://repro.io/ リモートで
Titaniumで1週間でアプリを作ってみた: UI作成
これから数回の記事で、Titaniumでアプリを作って公開するまでの経緯を公開したいと思います。 作成したアプリはこちらです→http://itunes.apple.com/jp/app/xin-zhe!news2/id548232809?mt=8 私は普段からHTML5ばかり触っていて、最後にiPhoneでアプリを書いたのはもう4年ほど前でした。当時はiOS2に対して Objective-C で直接書いていたのですが、最近はTitaniumやPhoneGap、cocos2dなど多数のフレームワークが登場してきており、それらの勉強をしたいという思いから今回の開発をスタートしました。 自分のMacがなかったので、7月5日にApple Storeで1台購入するところからスタートです。すぐにXcodeとTitanium Mobileを入れて開発環境を作り、サンプルのRSS Readerをビルドし
WebでTitaniumの画面生成コードをさくっと作る·Titanium Form Designer MOONGIFT
Titanium Form DesignerはWebブラウザ上でTitaniumのUIコードを生成するソフトウェアです。 TitaniumはJavaScriptのコードの中でUIを定義して画面を作成します。プログラマーにとっては分かりやすいかも知れませんが、慣れてくると面倒に感じるかもしれません。そこでTitanium Form Designerを使ってビジュアル的に画面を作成してみましょう。 作成画面です。左側からコンテンツを中央の画面にドロップします。 ドロップするとプロパティウィンドウが表示されます。 画像の場合はURLを入力します。 右側にソースが表示されています。これをコードに貼付ければ画面が作成されます。 Titanium Form Designerではまだ単純に追加したオブジェクトごとに画面を生成するくらいしかできませんが、そこは将来性に期待といったところでしょうか。また基礎
Titanium Mobileでクロスプラットフォーム開発しよう （その１） - Tech-Sketch
最近、iPhoneやAndroidのネイティブアプリをクロスプラットフォーム開発できるフレームワークが増えてきましたね。JavaScriptで開発できるTitanium MobileやRuby on Railsのように開発ができるRhodes Mobileなどが有名でしょうか。 ただし、こういったスクリプト言語でネイティブアプリを開発する場合、iOS/AndroidのAPIをどこまで利用できるのかやプラットフォームの違いがどこまで吸収できるのかが気になるところです。ということでTitanium Mobile 1.7.5でiPhone/Androidのネイティブアプリ開発を試してみましたので、その中で気になった点をいくつか紹介します。 なお、今回開発したアプリは画像、位置情報、テキストデータをサーバへPOSTするという簡単なものです。 iPhone/AndroidのView ネイティブア
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
【Titanium Advent Calendar 2011：20 日目】Titanium mobile で「Path」の UI を再現してみる vol.1 » astronaughts.net
この記事は、@astronaughts っていうかなりグダグダで変な人で、しかも自分が企画したかのようにしてるけど実は @t32k 発案の「Titanium Advent Calendar 2011」向けに書いています。 12月1日～25日まで毎日誰かが Titanium Mobile についての記事を書いていくというイベントです。 さてさて、イベント報告以外のことを書くのは久方ぶりな感じですが、前から書きたかった UI 実装について書いてみたいとおもいます。 で、せっかくなので有名どころのアプリの実装を真似てみようとおもい、UI が一新してから爆発的に流行っている iPhone アプリ「Path」の UI 実装を Titanium mobile で再現してみようということにしました。 Path にはいくつかの魅力的かつ斬新な UI 表現がありますが、一気に再現するには時間もないし、ボリ
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
iPhoneのようにNavigationBarを残してページ遷移する技 - kaz_konno's blog: walkthisway
Titaniumでは、iPhoneのNavigationBarを残してページ遷移を行うには、tabGroupを使うのが一般であるが、Androidでは、iPhoneのコードのままでは同じようには動かないし、タブを隠すことができない。 そこで、以下のような技を使うと実現できる。 (※この技がいつまで使えるかは分かりません。iPhoneでは異なる動きをします。) app.js var mainwindow = Ti.UI.createWindow({ backgroundColor:'#fff', navBarHidden:'false', url:'another.js' }); mainwindow.open(); tabGroupは使わず、さらのWindowを作ります。 another.js var win = Ti.UI.currentWindow; //タイトルバーを残してページ遷移
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
Use Appcelerator Titanium to build mobile apps for iPhone & Android and desktop apps for Windows, Mac OS X & Linux from Web technologies
In 2022, Axway made all private source code of the Titanium SDK public in the open source Titanium SDK GitHub repository. For more information, please read the full announcement and what you need to know about transitioning your apps. Amplify Enterprise Marketplace Today, Axway focuses on helping API development teams govern, secure, productize, and monetize APIs in a central marketplace—one you
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった - テクメモ
iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。 ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。 現在はアルファ版として公開中。 デモ デモ（ページ全体） ダウンロード コードサンプル ページ一部をフリックできるようにする場合。 $('.selector').flickable(); ページ全体をフリックできるようにする場合。 $(window).flickable(); ページ区切りを作る場合。sectionオプションでセレクタか要素を指定します。 $('.selector').flickable({ section: '.content' }); オプションの取り方などを含め、jQuery UIと同じような実装にしています。 詳しくは、http
スマホサイトを作る前に見たい国内38社の実例 (1/7)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高機能クラウドPOSレジ「スマレジ」 - iPad/iPhoneアプリを使った無料で始められるPOSレジ | クラウドPOSレジならスマレジ
iPhoneアプリのUIパターンを集めた『Mobile Patterns』 | 100SHIKI