wireframe.ccCreate better wireframes with an app fine-tunedfor wireframing Essential tools made simpler and smarter. Nothing to distract or slow you down. Achieve the right level of detail faster.
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
第45回 CSSのコンポーネント化がもたらすメリット | gihyo.jp
同じ記述の繰り返しを防ぎメンテナンス性や柔軟性を向上 W3Cによって策定された仕様の1つで、HTML／XMLの要素の表示をコントロールするために生まれたのが「CSS」（Cascading Style Sheets）です。HTMLとこのCSSを組み合わせることによって、文書構造（HTML）と見た目の表現（CSS）を切り離すことが可能になるほか、HTMLだけでは実現できないデザインやレイアウトが可能になるといった大きなメリットがあることから、Webサイトの構築やWebアプリケーションの開発において欠かせない技術となっています。 このCSSで現在注目を集めつつあるのが「オブジェクト指向CSS」や「Scalable and Modular Architecture for CSS」（拡張性のあるモジュールアプローチ）といった考え方です。これらは、CSSで記述する内容を「コンポーネント化」するこ
Androidの画面サイズを攻略して機種依存を吸収する(ナビゲーションバーとステータスバーのサイズを取得する) | TechBooster
※上記の名前付けは一般的なものではなく、今回の解説用に定義した名前です。（Displayクラスのサイズといえばどれもディスプレイサイズということになるため、わかりやすさを優先して図示しました) 特にステータスバーとナビゲーションバーは端末ごとカスタマイズされている可能性もあるため、動的に取得するのが望ましい項目と言えるでしょう。しかしながら、直接この2つの高さ情報を取得するAPIは存在していません。踏み込んで解説するならば、これらはアプリケーションの領域外でありアプリが気にする必要はなく、気にしないでいられるデザインやレイアウトを検討すべきである、という設計思想がうかがえます。設計思想を尊重するならば、このあと解説するAPIをなるべく使わないでいいように工夫できると機種依存の苦悩から解放されるでしょう。 取得する方法は続きから ナビゲーションバーを除いたディスプレイサイズを取得する ディス
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
さらばmozとoのdevice-pixel-ratio - fragmentary
そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。 これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。 これまではこんな感じ。 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { .foo { background-image: url(image-2x.png); } } } device-pixel-ratioはもともとWebKitの拡張だったもの。それをMozillaとOperaも取り入れたのだけど、ベンダー接頭辞の面倒さに加えてmin-/max-のつき方、値の書き方がばらばら
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト » スマートフォン devicePixelRatio について
スマートフォンには、画像1pxが実際のデバイス上で何pxとしてレンダリングされるかを示す devicePixelRatioという値があります。 これの値はwebkit系であれば、window.devicePixelRatioに入っています。 javascriptで出力する場合、 document.write(window.devicePixelRatio); で出力可能です。 また、cssでは-webkit-min-device-pixel-ratioで指定出来ます。 調べたところiPhone4ではこの値が2になっていて、 今まで通りに画像を表示させると自動的に拡大されて画像がボケて表示されます。 【回避策】その１ これを避けるには、実際に表示させたいサイズの2倍のピクセルサイズのものを用意して、 縦横を1/2にし、css又はHTML等で指定を行い 表示させると画像の1ピクセルとデバイスの
Nodefront by karthikv
Overview Nodefront is a node.js-powered command-line utility that speeds up front-end development. Installation Installation is simple with npm: It is not recommended to use npm update nodefront due to a known bug that prevents it from adding new dependencies correctly. Introductory Screencast Before diving into the documentation, you may view a screencast that introduces some of nodefront's key f
AndroidやiOSの「ハイブリッドアプリ」で，JavaScriptとネイティブ・コードが連携する仕組みを図解 （おまけ：HTML側で施すべき，クロスプラットフォーム対策） - 主に言語とシステム開発に関して
AndroidプログラミングのTOPへ HTMLやJavaScript等のWeb技術を使って，AndroidやiPhoneなどモバイル環境のネイティブ・アプリを作成する事ができる。 そういうアプリの事をハイブリッド・アプリと呼ぶ。 AndroidとiOSでは，ハイブリッド・アプリを実現するためのアイデアは，非常に似ている。 下記の図を見れば，仕組みが酷似している事が分かるはずだ。 なおWindows Phoneの場合も，だいたい似たようなフロー。 以下では，各プラットフォームごとの詳細な事情をメモする。 また，複数プラットフォーム間での移植性を向上させるために，HTML側でどのように対処したら良いか？という課題についても述べる。 （１）Androidの場合 Androidでハイブリッド・アプリを実現するための仕組みは，下記のエントリに記述した。 たった２ファイルで，HTML＋JS製のネイテ
jQuery Mobile と HTML5 で、Androidのネイティブアプリを作成する手順 - 主に言語とシステム開発に関して
AndroidプログラミングのTOPへ 重要なお知らせ： この記事で公開した情報は，AndroidのMVCフレームワーク「Android-MVC」の機能の一部として取り込まれました。 より正確な設計情報や，動作可能な全ソースコードを閲覧したい場合，「Android-MVC」の公式ページより技術情報を参照してください。 AndroidのMVCフレームワーク - 「Android-MVC」 http://code.google.com/p/android-mvc-... jQuery Mobileは， スマホ向けの動的UIを，JavaScriptを書かずに作成できるツール。 HTML5を書くだけで，動きのある画面がコーディングできる。 極めて恐るべきUI構築能力を持っているので，「UIのためのDSL（ドメイン特化言語）」と呼んでもいいぐらいだ。 このライブラリは，Webサイトの画面だけでなく，
AndroidのWebView#addJavascriptInterfaceがどれだけ危険か検証してみた (Kanasansoft Web Lab.)
Android SDKのJavaDocの説明はかなり簡素なんだけど、WebViewのaddJavascriptInterfaceの説明は珍しく説明が多い。 端的に意訳すると、「addJavascriptInterfaceを使うと、キミのアプリケーションをJavaScriptから操作できるようになるよ。とても便利な便利だけど、危険なセキュリティの問題があるよ。キミが書いたHTML以外では使わないでね。」という感じ。 「オブジェクトを公開する」行為が危険だというのは、技術者は直感的にわかると思うけど、じゃあどれくらい危険なのか実際に試してみた。 まず、次のようなAndroidアプリケーションを作った。 「android.permission.INTERNET」をパーミッションに指定して、WebViewを画面に設定し、後述するHTMLを開くようにした。 WebViewClientの説明は割愛。
AndroidのWebView#addJavascriptInterfaceは基本使わない方がいい、っていう話 - 愛と勇気と缶ビール
基礎知識 Androidアプリケーションで埋め込みブラウザのようなものを実現するためのViewコンポーネントであるandroid.webkit.WebViewには次のようなシグネチャでaddJavascriptIntefaceというメソッドが生えています。 http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String) これは、簡単に言うとJavaのオブジェクトをWebView内でロードされたJavaScriptから叩けるようになる、というものです。例えば class JSInterface { private Context context; public JSInterface(Context c
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
ADWAYS ENGINEERS BLOG:UIWebView
UIWebView 2012年06月29日 iPhoneのネイティブ機能をWebViewから呼び出す方法（１） ・はじめに リワード広告の「Reward Plus」の担当エンジニアをやっています、波切です。 最近、iPhone向けの新サービスが立ち上がり、私自身もiPhoneアプリ開発に入門したばかりなので、iPhone系の開発の話題を提供できればと思います。 ・ネイティブとWebの連携 HTML5の普及で、昨今ネイティブ機能でしか実現できないことは、だいぶ減ってきました。 Webの方が柔軟性があり、しかもネイティブの開発よりも少ない労力で開発することができるので、Webが利用できる場面では積極的に活用していきたいものです。 一方で、アプリ内課金やデバイス機能へのアクセス、プッシュ通知等といったiPhoneの特性を生かしたサービスをつくるためには、ネイティブ機能へのアクセスは、まだまだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Backbone demo app with sinatra backend
スマートフォンアプリデザインに役立つ 基礎のまとめ！
https://ameblo.jp/ca-1pixel/entry-11334309931.html
Sign in - Google Accounts