アプリUI制作のチュートリアルで学ぶSketchの使い方 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第1回ではSketchの魅力についてお伝えしました。今回は、スマートフォンアプリの「Sign upページ」を例に、基本的なUIをデザインする上で必要なSketchの操作を説明します。Sketchの使い方だけでなく、UIデザインに役立つTipsも紹介します。 ※文中の（A）などはショートカットキーです。積極的に使って覚えていきましょう！ Sign upページは、以下の手順で作成します。 アートボードを用意する ナビゲーションバーを置く ユーザーアイコンの画像を丸く切り抜き配置する 入力欄を作成する ボタンを作成する 解説の中では細かい数値や色については触れませんが、同じ数値で作成したい方は図を参考にしてください。また、今回作成する「Sign upページ」のSketchデータはこちらからダウンロードできます。
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
MacBook Proを高速SSD「Samsung SSD 830」で爆速化 (1/3)
2010年4月登場のMacBook ProをSSDに換装してみる 性能に不満が出てきた少し前のPCでも、HDDをSSDに換装することで、パフォーマンスが大きく向上し、最新のマシンに生まれ変わったような感覚で使うことができる。SSDは、各社から発売されているが、そのなかでも、性能と信頼性が高いと評判の製品が、「Samsung SSD 830」（以下、SSD 830）である。 SSD 830の性能の秘密については、このインタビューが参考になるだろう。今回は、実際にノートPCのHDDをSSD 830に換装し、パフォーマンスがどれだけ上がるのか検証してみたい。 SSD 830は、2.5インチ／7mm厚のSATA3対応SSDであり、ほとんどのノートPCやデスクトップPCで利用できる。デスクトップPCの場合は、内部のスペースに余裕があるため、SSDを追加できるが、ノートPCの場合は、搭載されているHD
iOS 4.2の新機能で作るHTML5+JSアプリ (1/4)
iPhone/iPad用OSの新バージョン「iOS 4.2.1」が11月22日にリリースされました。すでにインストールした方も多いでしょう。目玉はiPadのマルチタスク対応などの新機能ですが、今回のバージョンアップはiPhone/iPad向けのWebアプリケーション開発者にもうれしい新機能が追加されています。ブラウザー周りで追加または強化された機能を以下にリストアップします。 加速度センサー／傾きセンサーのサポート Web Sockets (ソケット通信)のサポート HTML5 Formsのサポート XMLHttp Request Levle 2 (一部) のサポート 印刷のサポート Int32やFloat32Arrayなどの配列のサポート イベントの追加 Canvas/SVGの機能追加 その他 新機能に関するリファレンスは米アップルのサイトに用意されています（11/15日付の情報）。 今
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
サーバー不要で保存できる「Web Storage」の使い方 (1/5)
HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力
iPhoneのJavaScriptアプリをAndroidに3行で移植 (1/4)
iPhone 3G向けのJavaScriptをAndroidでも動かそう iPhone 3Gの発売から約1年。今年7月、噂のグーグル携帯ことAndroid携帯(HT-03A)がNTTドコモから発売されました（関連記事）。6月に開催されたGoogle Developer Day 2009で同端末が先行配布されたこともあり、すでに使い込んでいる開発者の方も多いでしょう。 Androidのアプリケーションといえば、Android専用のネイティブアプリに目が行きがちですが、当然Webブラウザー上で動くWebアプリケーションも使えます。AndroidにはWebアプリのオフライン利用を実現するブラウザープラグイン「Gears」(旧名Google Gears)が標準で搭載されており、ローカル環境だけでも簡単なアプリを動かせます。 今回のJavaScriptラボでは、本連載の第1回、第2回で作成したiPh
ASCII.jp：PhotoshopのフィルターをJavaScriptで作る！｜古籏一浩のJavaScriptラボ
Adobe PhotoshopもJavaScriptをサポート JavaScriptにはInternet ExplorerやFirefox、Safariなど、Webブラウザー上で動作するもの、というイメーシがありますが、JavaScriptはデスクトップアプリケーションにも活躍の場を広げています。 特に、「Photoshop」に代表されるアドビ システムズのアプリケーションのほとんどがJavaScriptをサポートしており、Photoshopや「Bridge」「After Effects」 はソケット通信まで対応しています。つまり、Webサーバーにアクセスして必要なデータを受け取り、Photoshopで画像を加工し保存する、といったことがJavaScriptで自動化できるのです。さらにBridgeと連携すれば、FTPを使って加工した画像データをサーバーに転送する、といった処理まで自動化でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
