Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp
2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 一般的には、デザインシステムとは一貫したデザインや操作性でWebサイトやアプリケーションを提供するためのガイドラインの集まりと理解されます。使われ得る色のパレットや可能なスペー
第1回 読み込んだ画像をトゥイーンアニメーションさせる | gihyo.jp
これからのWebはHTML5だ。とはいわれるものの、どの機能や技術を使うかは、コンテンツ次第でさまざまといえる。その中で、ダイナミックでインタラクティブな表現をつくりたいとき、Canvasの機能が注目される。ただし、Canvasが提供するのはおもに描画の機能で、アニメーションやインタラクションはJavaScriptライブラリの助けを借りることになる。 そこで本連載では、CreateJS Suiteを選んだ。開発者は、Flashコンテンツの世界で有名な Grant Skinner（グラント・スキナー）氏だ[1]。「ダイナミックでインタラクティブな表現」ともって回った言い方をしたが、つまりは「Flashみないな」ものがつくりたい（つくってほしい）という要求だろう。CreateJSのライブラリ群は、Flashを使っていた人たちにとっては、なじみやすい設計になっている。 また、最近注目されてい
第5回 トゥイーンアニメーションを仕上げる | gihyo.jp
前回から、TweenJSのデモ「TWEEN CIRCLES」をお題にした。同心円のリングが、ステージ上のクリックした位置に、時間差でトゥイーンする。前回、一応それらしい動きはできた。けれども、Canvasのあちこちを続けざまにクリックすると、同心円にしたリングのトゥイーンがばらばらになってしまった（図1）。今回は、アニメーションやインタラクションをよく確かめて、スクリプトの仕上げにかかる。 図1 あちこちを続けざまにクリックするとリングのトゥイーンがばらばらになる ※ 前回のjsdo.itサンプル「Tween Circles Trial」よりキャプチャ 隊列を乱さない ステージ上を素早くあちこちクリックすると、なぜリングのトゥイーンは隊列を乱してしまうのか。それは、先頭と後尾でトゥイーンを時間的にずらしているからだ。先頭は前のトゥイーンをすでに終えていて、すぐにつぎのトゥイーンに向かう
第2回 Hosted Appsの作成方法と公開 | gihyo.jp
前回は、Chrome Web Storeの概要からAppsの簡単な説明、Chrome Web Storeの使い方までを説明しました。今回は、2種類あるWeb Appsのうち、Hosted Appsについて作成方法から公開までを具体的にご紹介したいと思います。 Hosted Appsとは Hosted Appsの基本的な考え方は、一般的なWebサイトと変わりありません。自身で管理するWebサーバーからWebアプリやWebサービスを提供します。Chrome Web Storeでは、それらをインストール可能なWebアプリとして公開することができます。 サーバー側では任意の言語やWeb技術を利用し、クライアント側ではHTML、CSS、JavaScriptなどを使用します。HTML5やその関連技術、Chromeがサポートする新しいAPIなども利用可能です。是非、これらを活用して好きなWebアプリを作
第3回 TitaniumでTwitterクライアント──レイアウトの調整 | gihyo.jp
前回の記事が公開された直後からTitaniumには大きなバージョンアップがあったので、今回はTwitterクライアントの続きを始める前に、そのお知らせから始めます。 Titanium Moble 1.5.1 リリース 前回までの記事は Titanium Mobile 1.4.2 で動作確認を行いながら執筆していたのですが、この度新バージョンの 1.5.1 がリリースされました。開発元のAppceleratorによると、この1.5系列によってAndroidでの開発はベータ版から正式版になったという扱いのようです。本連載ではまだAndroid開発について説明していませんが、Intent、Activity、Menuボタンからのメニュー表示といったAndroidらしい機能が使えるようになったので、Androidでの開発もいよいよ面白くなってきたと言えるでしょう。Android SDKのインストール
第1回 WSGIの概要 | gihyo.jp
PythonのWebアプリケーションフレームワーク Pythonには、Zope、Twisted、Django、TurboGearsなどのさまざまなWebアプリケーションフレームワークが存在します。以前は、このような幅広い選択肢は、新しくPythonを使用しようとするユーザにとって都合が悪いことがありました。使用するフレームワークによって、利用可能なサーバが制限されてしまったり、逆にサーバによって利用可能なWebアプリケーションフレームワークが制限されるといったことがあったためです。 そのようなPythonの状況とは対照的に、Javaにおいては、多数のWebアプリケーションフレームワークがあるにもかかわらず、サーバとWebアプリケーションをつなぐ際に、統一されたJava Servelet APIを用いることで、アプリケーションフレームワークを気にせずにServelet APIが利用できる環境
第10回 App Storeでアプリを公開 | gihyo.jp
本連載もいよいよ最終回を迎えました。ここまで開発してきたアプリケーションを、App Store上で全世界に公開する手順を解説し、これまでのまとめを行います。 アプリの登録に必要なもの App Storeへアプリを登録するためには、以下のものを用意する必要があります。 57×57ピクセルのアイコン 512×512ピクセルのアイコン (JPEGまたはTIFF) スクリーンショット アイコンを作る アイコンは、アプリを起動するためのホーム画面に並ぶアイコン用に57×57ピクセルの物と、iTunesのApp Store上で表示するために512×512ピクセルの物の2種類が必要です。そこで、はじめに512×512ピクセルのアイコンを作っておき、それを57×57ピクセルに縮小すると手間を省くことができます。もちろん、App Store用とアプリ用でアイコンを別の物にしても構いません。 アイコンは2つ用
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
