JavaScriptにもMedia Queryを·Javascript onMediaQuery MOONGIFT
Javascript onMediaQueryはMedia Queryライクな振り分けをJavaScriptで実現するライブラリです。 CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。 こちらはデスクトップの場合。 こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。 実際のコードです。contextによる指定で実行される関数が変わります。 Javascript onMediaQueryは画面幅を常に監視しているようで、Webブラウザウィンドウの大きさを変えるとメッセージが切り替わるようになっています。スマートフォンかタブレットかによる区別ではなく、画面幅に応
高品質なコンポーネントを使って格好いいサイトを作ろう·Chico UI MOONGIFT
Chico UIはWebサイト向けのコンポーネント群、デザインを提供しています。 最近はTwitterのBootstrapを使ってWebサイトを構築しているところが増えてきましたが、何となく似通ったデザインになってしまうのが難点です。人とはちょっと違う、でも簡単に格好いいデザインを実現したいという人にお勧めなのがChico UIです。 オートコンプリートです。 ボタンを押してハイライトします。 カレンダーです。 スライドです。 文字数カウンターです。 タイポグラフィです。 日付ピッカーです。アイコンをクリックでカレンダーが表示されます。 ドロップダウンです。 クリックで下のコンテンツが表示されるデモです。 フォームも多数デザインが揃っています。 レイヤーです。マウスオーバーで吹き出しが出ます。 モーダルウィンドウです。 メニューです。階層に対応しています。 タブです。 ツールチップです。
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
Maka-Veli.com / 作業工数を見積る、という事。
たまには企業ディレクターっぽい記事を書いてみようかと・・・見積作業がたぶん一番多いです。失敗すれば、お客さんにも会社にもデザイナーにも迷惑がかかってしまう重要なタスク。お金に関する問題なので、全工程を把握し、リスクヘッジも含みつつボッタクリなんて思われないようにし、きちんと作業工数分ご請求させて頂く為にミスのないよう心がけています。今回はそんな御見積時に関する、僕が気をつけている点。ディレクターってなんだよ、何してんの偉そうに、って疑問視される方も、少しは身近に感じてもらえるでしょうか？※画像のネコさんは内容と全く関係無いです、申し訳ございません。 個人的に重要だと思うポイントは以下です。 作業の終わりはどこかを決める 「見えない工数」が見えていないと、終わりが無いです。 ラインはきっちり引きましょう。 なぜかというと、 もちろんこちら側の作業が終わらないのを防ぐ理由も大きいです
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
独特のUIを提供してくれるjQuery用のUIフレームワーク「Ninja UI」:phpspot開発日誌
Ninja UI 独特のUIを提供してくれるjQuery用のUIフレームワーク「Ninja UI」 アイコンや、ボタン、ポップアップ、レーティング、スライダーといった各種UIを提供してくれます。 UIは独特のデザインですが、それなりに汎用的に使えそうなものになっています。 他と同じUIは嫌だ、という方は使ってみるのもよいかもしれません。 関連エントリ jQuery UI のアイコンチートシート レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン selectボックス利用時に選択肢を複数選べるUIを提供してくれるjQueryプラグイン「selectList」
レガシーなブラウザでもCSS3の新技術を活用する·Selectivizr MOONGIFT
SelectivizrはCSS3の機能をIE6〜8でもサポートできるようにするライブラリ。 SelectivizrはJavaScript製のオープンソース・ソフトウェア。CSS3ではIDやclassによる指定の他にもセレクタが追加されている。例えば属性値による指定でスタイルを設定することもできる。機能が追加されれば、より自由度の高いWebデザインができるようになる。 使い方 しかし足を引っ張る要素も存在する。それがレガシーブラウザだ。CSS3に対応していないWebブラウザであるIE6〜8においてセレクタを使えるようにするのがSelectivizrだ。 SelectivizrをIE6〜8において読み込めば、多様なセレクタが利用できるようになる。面白いのはjQuery、dojo、prototype.js、YUI、DOM Assistant、MooTools、NWMatcherといった有名なJa
Flash→HTML5移植は本当か？ ハンゲームの事例
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5（+JavaScript）で置き換えた、なんて話は（少なくとも日本では）ほとんど聞かない。本当にFlashコンテンツをHTML5で（しかも商用レベルで）置き換えられるのだろうか？ そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」（2月25日開催）に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
これは要チェック。OAuthプロバイダ実装のノウハウをコードから知る「OAuth Provider Demo」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
OAuth Provider DemoはRails3で実装された、OAuthプロバイダのデモプログラム。 [/s2If] OAuth Provider DemoはRuby on Rails3製のフリーウェア（ソースコードは公開されている）。WebサービスでWeb APIを公開することは決して珍しいことではなくなっている。そして最も多いのは手軽に利用できるRESTfulのものが多い。 ユーザ情報のJSON そんなWeb APIを提供する場合、認証についてはOpenIDを使うのがセキュリティ的にも安心できる。そして各機能についてはOAuthを使うのが良い。そうすればアプリケーションにパスワードを保存しなくて済む。その時の参考になるのがOAuth Provider Demoだ。 個人的にこれはかなり欲しかったソフトウェアだ。OAuthを利用する側のライブラリは数多いが、提供する側のやり方について
これは便利！ブラウザ/レンダリングエンジンごとのCSS設定をJavaScriptで解決する·CssUserAgent MOONGIFT
CssUserAgentはJavaScriptを使ってブラウザ/レンダリングエンジンごとのクラス定義を生成する。 [/s2If] CssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特にここ数年のようにWebブラウザの種類が増えると大変だ。 このようなクラスが定義される レンダリングエンジンで考えても数多く、さらにバージョンによってレンダリング結果が異なるとなると発狂しそうになってしまうほどだ。そんな苦しむWebデザイナーの方々を救うかもしれないのがCssUserAgentだ。 CssUserAgentはua-*というクラス名を自動的に定義するJavaScriptファイルだ。「ua-（ブラウザ名）」「ua-（ブラウザ名）-（メジャー番号）」「ua-
SVGでグラフを生成する·SVGGraph MOONGIFT
SVGGraphはPHP製のオープンソース・ソフトウェア。HTML5が正式に決まり、メジャーなブラウザがHTML5対応を強めている。そんな中、ようやく日の目を見そうなのがSVGだ。技術的には昔からあるものの、対応ブラウザが限られることもあってあまり使われてこなかった。 棒グラフ、円グラフ SVGを使うと幸せなのが、クライアントサイドでレンダリングを行えるということだ。サーバサイドでは画像を生成する必要がなく、XMLベースでベクターデータを出力すれば良いだけだ。そしてSVGを使ったグラフライブラリがSVGGraphだ。 SVGGraphはPHPを使ってグラフを生成する。対応しているグラフは棒グラフ、円グラフ、折れ線グラフ、散布図となっている。棒、円グラフは3D表示にすることも可能だ。画像とは異なり、リンクを埋め込むことができたり、値のツールチップを入れることもできる。 折れ線グラフおよび散布
jQuery UIのウィジェットを使ってみよう
対象読者 jQuery UIに興味があり、使ってみたいと思っている方 必要な環境と準備 jQuery UIのダウンロード 執筆時点のjQuery UIの最新版は、1.8.2です。第1回を参考にダウンロードしましょう。 Dialog Dialogは、ユーザのアクションに対して、警告、問い合わせなどのダイアログを表示させたいときに利用します。例えば、ユーザ登録時に「登録します。よろしいですか？」といったメッセージや、データを削除させる時に「削除しますが、よろしいですか？」などのメッセージを表示させることができます。 今回は、ボタンをクリックすると、［OK］と［キャンセル］ボタンが配置されたダイアログが表示されるサンプルを取り上げます。 リスト1にDialogプラグインの使用例を、図1、図2に実行結果を示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
WEBデザイナの為のHTML5とCSS3のツール完全版 | しぶりび通信
Appleが、iPad/iPhoneでも見られるHTML5ショーケースを公開しました。スティーブ・ジョブズはかねてより「技術は移り変わるもので、最盛期を過ぎれば墓場行きだ。」と発言しています。 FLAHを切り捨て、HTML5に賭けるその意気込みは、多くのWEB制作者にも伝わった事でしょう。 トレンドに乗ってiPad/iPhone用に最適化すべきか、まだまだシェアの高い既存ブラウザ用に最適化するのか悩むところです。 Ultimate List of HTML5 and CSS3 Tools Admix Webにて、Ultimate List of HTML5 and CSS3 Toolsと題して、Teylor Felizさんが吟味したHTML5とCSS3のツールが紹介されています。 1.HTML5 & CSS3 Readiness 各ブラウザのHTML5とCSS3対応状況とその進捗がわかりま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の可能性を体験できる、すごいサイトのまとめ
サイトの見せ方をひと工夫するjQueryプラグイン
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法