何度も読み直したい！はてブ数300以上のWeb制作系スライド2012年版ノンデザイナーのための配色理論 / Webデザインのセオリーを学ぼう / ご存知、ないのですか？CSSの優先順位他...全13件
次世代JavaScriptでデータバインディング： Object.observe() を試す - ぼちぼち日記
1. はじめに、 本記事は、HTML5 Advent Calendar 2012の参加（6日目）エントリーです。 当初は昨年のアドベントカレンダーでテーマにしたマイナーAPIをネタにして書こうかと考えていたのですが、探してもあまりピンとくるものがなく、いつものごとく新技術ネタに飛びついてしまう習性がでてしまったので今回次世代JavaScript(ES.harmony)ネタ(Object.observe)を書かせていただきます。 現時点では直接HTML5とは関係ありませんが、標準で利用できるようになったら皆さんがお世話になる機会が必ず増えると予感しています。今の時点で知っておいてもらっても絶対損はないと思いますのでどうかご了承ください。 （＿Ｏ＿） 2. Object.observe() とは何か？ 先日のHTML5勉強会でも取り上げられましたが、最近 JavaScript の MVC フレ
Adobe Edge Animateを使ってみました。 – 水玉製作所
Adobe Edge Animateで、HTML5スライドショーを作成してみました。 スライドショーなどの簡単なものであれば、Flashで培った技術が生かせそうな予感がします。 スライドショーの仕様 ・約2～3秒で写真自動切り替え ・画面左右端クリックで写真送り＆写真送り方向の変更 ・下部の名前クリックで写真ページヘ遷移。 ※写真はFlickerのCreative Commonsのものをお借りしております。 Edge Animate 使ってみた感想 ・symbolにくるむことで、Flashのムービークリップ的な操作ができるので Flashに親しんだ人ならとっつきやすい。 ・レイヤーに一つしかオブジェクトは配置できないので、レイヤ構造がすごく縦に長くなりがち ・Flashと違い、フレームレートの設定はなくタイムラインはミリ秒で操作でき 慣れるとわりと楽だと思った。 ・インタラクティブ要素の少
Android CheckedTextView を使うときの注意
ListView で CHOICE_MODE_SINGLE とか CHOICE_MODE_MULTIPLE とか使うときに、1行のレイアウトとして CheckedTextView を使うことがあると思いますが、チェックマークの切り替えには注意が必要です。 チェックマーク画像を設定するメソッドとして setCheckMarkDrawable(int resid) と setCheckMarkDrawable(Drawable d) があります。 例えば、チェックできる行にはチェクマーク画像をセットして、チェックできない行（例えばフラグが立ってるとか、ロックされているなど）にはチェックマーク画像をセットしないようにする場合、 if(isChecked) { ctv.setCheckMarkDrawable(R.drawable.check); } else { ctv.setCheckMark
お手軽高機能！Closure UI【goog.ui.ColorPicker】 | DevelopersIO
Closure Libraryに用意されている「goog.ui.ColorPicker」は、カラーパレットから選択した色のカラーコードを取得することができるコンポーネントです。「goog.ui.ColorMenuButton」などと同様に内部的に「goog.ui.ColorPalette」を利用しています。 デモ #FFFFFFから#000000までのウェブセーフカラーのパレットを描画しています。パレットで選択した色のカラーコードを下記文字列中に表示します。 選択色のカラーコードは「」です。 デモコード index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>goog.ui.ColorPicker</title> <script src="http://closure-library.googleco
AcrionScript3やってた自分からみたCoffeeScript – 宇都宮ウエブ制作所
正宗です。JavaScriptの開発のためにと思ってすごく今さらなんですがCoffeeScriptを導入したので、そこらへんをちょっとまとめておきたいと思います。 そうはいっても、既にO’reillyからCoffeeScriptについて本が出ています。さらにそれは作者によってオープンソースで公開されていて、さらにさらにminghaiさんがこちらに和訳したものを公開されております。 この本を読めば、特に他に何か読む必要あるの？というくらい、CoffeeScriptについては既にまとまった記事がネットでも書籍でも存在しているので、わりかし今回自分はこの記事を書くに当たって今まで以上に消極的だったりします。 みなさんは私が今書いているこの記事のことなんか忘れて、すみやかに上記リンク先に飛んでください。 いちおう自分は、「あれ、ActionScript（以下AS3）でこう書いてたやつ、Coffee
[JavaScript]iOS, AndroidのOrientation（画面向き）を知る方法
iOS, Android端末の画面の向きにあわせてゴニョゴニョしてみたい。 縦(Portrait), 横(Landscape)になった時の画面幅を取得しようとしています。 本来であればイベント “onorientationchange” という便利なものがあるので使えばいいんだろうけど、一部Androidで取得できないケースもある様子、で困ったなぁと… 無駄を承知でこんな風にしてみました。 jQueryを使用しています。 $(window).on('resize orientationchange', function () { console.log(window.innerWidth); }); resizeだけでも良かったと思うのですが、HTML, CSSのどちらかが悪いのかiOSでresizeイベントをうまく取得できません。 仕方なくorientationchangeも監視対象にし
![[JavaScript]iOS, AndroidのOrientation（画面向き）を知る方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c35180033ae4020a0e0c1b662cd0d153d918e3f/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2F_fb%2Ffb_inazumatv2.png)
Android SDK ツール リビジョン 21
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Adobe Scout （コード名 Monocle） の公開 - akihiro kamijo
アドビから Flash コンテンツ用のプロファイリングツール Scout が公開されました。ブラウザ内の Flash コンテンツも、デバイス上の AIR アプリも、簡単に且つ詳細にプロファイリングができます。 Scout は、ベータ版の時点では Monocle というコード名で一部の機能が紹介されていたツールで、正式な公開に伴い名称が変更されました。ドラゴンボールに出てくるスカウターをイメージして付けられたのかどうかは不明です。 提供は Creative Cloud を通じて行われます。Creative Cloud のアプリダウンロードページから Game Developer Tools を選択して展開すると、その中に Scout が含まれています。 最初のバージョンは無償で利用できます。Creative Cloud にユーザ登録だけあればダウンロードできるようになっています。 サポートさ
レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」:phpspot開発日誌
Calendario: A Flexible Calendar Plugin | Codrops レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」。 次のようなグラデーションが美しいカレンダーのデモとプラグインが共に配布されています。 カレンダーのHTML構造は予め決められており、CSSでデザインされています。 カレンダー機能はシンプルなものですが、コールバック等である程度カスタマイズできそうです。 関連エントリ Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」
Git + Jenkins + Groovyのインストール #kyon_mmAdvent - うさぎ組
kyon_mm Advent Calendar つぎのリンクにあるAdventCalendarの一日目です。 http://connpass.com/event/1457/ やること Groovyのインストール Gitのインストール Jenkinsのインストール 環境 特に指定しないが、GroovyとGitはWindowsでの説明とします。 Macの場合はそれぞれをHomeBrewなりでいれるのが楽でよい。 細かいバージョンを気にして触りたい人は、バイナリをダウンロードして、適宜自分でパスを調整することになる。 インストールにあたって解説しないけど、必要なもの インターネット JDK7のインストール 注意事項 JDKのインストーラは場合によっては「JAVA_HOME」という環境変数を設定しません。インストール後に再起動をし、必ず「JAVA_HOME」が設定されているかを確認してください。設
Adobeアカデミックストア
Students: Save over 65% on Creative Cloud All Apps for the first year. And get the first month on us. Ends Sep 2. See terms. Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used sof
Adobeアカデミックストア
Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, A
[JS]アラートやコンファームなどの通知ダイアログとユーザーのアクションを表示するパネルも簡単に実装するスクリプト -alertifyjs
アラートやコンファームやプロンプトの通知ダイアログ、ユーザーがOKやCancelをクリックしたことを伝えるパネルを簡単に実装できるスタンドアローンのスクリプトを紹介します。 alertifyjs alertifyjs -GitHub alertifyjsの特徴 alertifyjsのデモ alertifyjsの使い方 alertifyjsの特徴 alertifyjsは簡単にカスタマイズができる通知システムを実装できるJavaScriptです。 alert, confirm, promptの全通知ダイアログはフルカスタマイズが可能。 通知システムもカスタマイズが可能。 OKとCancelの両方のボタンにコールバックに対応。 ダイアログを連携させることも可能。 alertifyjsのデモ promptの通知ダイアログと通知システムを表示 alertifyjsの使い方 Step 1: 外部ファイ
これからBackbone.jsを始めるならこれ読んどけばOKという記事たち - Qiita
Backbone.jsで書き始めたら「Backboneどう？」と聞かれることがあったので、自分ではあんま語れるほど知らないけど「ここらへんの記事は素晴らしいよ！」というものをまとめておいたヽ(・ω・´)ゝ まずは読んでおくべきもの Backbone.js Advent Calendar 2011 なにはともあれまずはBackbone.js Advent Calendar 2011 ある程度まで書けるようになる情報は総ざらいで書いてあると思う。 中でもBackbone.js入門はありがたい。読んでおけば基本の仕組みを知ることが出来る。 Backbone.jsが依存しているunderscore.jsの情報なんかもあったりしてありがたい。 ちなみに今年(2012)のAdvent Calendarはこちら。今はまだ始まったばかりだから情報少ないけどこれから充実してくるだろうし楽しみ（´ω｀） Ba
CYOKOLOG — jsdo.it みたいなことが簡単にできる jQuery プラグイン作ってみた
jQuery プラグイン作った時とかに説明用とデモ用のソースを別々に用意するのが面倒で、なんとか一本化できないかなぁとあれこれしてたら、jsdo.it とか jsFiddle みたいなことができるようになってた。 jquery.ex-demo - GitHubjQuery ver 1.7 以上、jQuery Compatible を併用すれば Ver 1.2.x で動作可。 2013/09/25追記 Google Code Prettify と統合しました。詳細は以下をご覧ください。 [Ex Code Prettify] その場で編集／実行できるシンタックスハイライター jQuery プラグインデモページに使用デモページに使う場合は以下のような感じ。 HTML <!-- 実行結果の表示場所を用意（必須ではない） --> <div class="result"></div> <!-- CSS
カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」:phpspot開発日誌
alertifyjs - An unobtrusive customizable JavaScript notification system カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 デザインもシンプルですっきりしていて動きが少し気持ちいいアラートダイアログを実装できます ボタンを「OK」とか自由に指定することもできます ダイアログだけでなく、ページの右下にちょこっと出す通知風にもすることが可能。 関連エントリ リアルなWindows風ツリービューが実装できるjQueryプラグイン「dynatree」 モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」 カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」 どんなリストも横スクロールさせられるjQuery
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
スマートフォン端末向けにtel:を仕込む小技 - inkdesign
05 Dec 2012 ※この記事は、軽めのjQuery Advent Calendar 2012の５日目の記事です。 スマートフォン端末のブラウザでは、tel:スキーマを<a href="tel:0120-0000-0000">お問い合わせはこちら</a>というように利用することで、ブラウザ上でタップして電話をかけることができるようになる。 しかし、これをデスクトップブラウザで実装してしまうと、クリックした時に不明なプロトコルとしてエラーとなってしまう。 これが問題となる可能性があるのは、いわゆるレスポンシブ・ウェブデザイン的なアプローチで、モバイルブラウザとデスクトップブラウザでHTMLを一本化してしまうような場合だ。1 カスタムデータ属性を使ったアプローチ 前提として下記のようなマークアップをおこなう。 お問い合わせは<span data-tel="0120-9999-9999">お
さまざまな国の郵便番号から市区や州などの地名を取得出来るAPIを公開、提供している・Zippopotamus - かちびと.net
日本だけでなく、海外の方もターゲットにしているコンテンツに需要あるかも、と思ったのでメモがてらご紹介します。様々な国の郵便番号を取得できる、というAPIを公開、提供しているWebサイト、Zippopotamusです。勿論、日本も入っていますよ。 無料で利用出来ますが、まだ完全なものではありません。ただ、プロジェクト自体は凄く素敵だと思うので有志に期待です。 世界の国名や市区を郵便番号で取得出来る、というもの。と書くと凄そうに聞こえますが、日本に限ってはまだ実用段階とは言えません。ただ、OSSとしても公開されているので今後に期待したいかも。 デモ 日本のを作ってみました。住所はローマ字で取得されます。 現状は日本人向けではないですね。 コード 取得したい国に合わせてAPIを叩きます。 http://api.zippopotam.us/JP/100-0001 上記のように/国コード/郵便番号で
表示位置をいい感じに調整してくれるネットワークグラフ·Springy MOONGIFT
Springyはネットワークグラフにおいてノード同士の表示を自動的に調整してくれるライブラリです。 オブジェクト同士の関連性からトレンドを見いだすのに使われるネットワーク図。そんなネットワーク図の表示において多数のオブジェクトが重なってしまう…といった時にはSpringyを使ってみましょう。 デモです。関連性が適切に見えます。この位置まで自動で調整されるのがSpringyの特徴です。 向きが変わったとしても大丈夫。 こんな感じに交わっていたとしても… 最終的にちゃんと調整されます。 Springyはこのレイアウトを決定するアルゴリズムを備えています。パラメータを自分で調整することもできますが、かなり高いレベルで表示が調整されるので殆どデフォルトのままで問題ないのではないでしょうか。 SpringyはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOO
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介 | DevelopersIO
Bootstrapいいよね Bootstrapです。大人気の見た目系フレームワークですね。いろんなサイトで見かけます。 自分もそうなのですが、エンジニアでコードは書くけどデザインの事はよく知らない。だけど「使いやすくて、いい感じにしたい」という欲求を満たしてくれてます。ただ、デフォルトは見やすいんだけど、ちょっとカスタマイズしたいなとか、色指定があった場合など困りますね。例えばありそうなのが「コンテンツ管理画面を作りたい、デザインは特にこだわらない、けど使いやすいのがいいな。」とかさらに「イメージカラーが青だからそれベースで」とか。 そんなあなたにぴったりな厳選ツールを紹介しちゃいまっくすぅ〜！ Lavish 〜 画像から配色を生成してくれます 〜 このサービスは画像を解析してBootstrapの配色を捻り出します。 何処かの企業向けに作る場合に企業のロゴなどから配色してみるといい感じにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
_level0 | Kayac Interactive Designer's Blog
Brackets の Sprint 17 の公開 - akihiro kamijo
Adobe Scout « AKABANA
1216彩票-官网平台
IBM Developer
throw Life - Google Maps Android API v2を使ってみた