サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
sp.vitalify.jp
Javascriptで実装された顔認識ライブラリ「headtrackr.js」がけっこうスゴイです。 Githubでソースが公開されています。 https://github.com/auduno/headtrackr/ 以下のデモでどういう機能か分かると思いますが、 Webカムに映った顔を認識し、その位置座標を取得できるものです。 実装されている処理は、ホワイトバランスを調整する処理や顔認識処理、スムージング処理などをまとめて一つのライブラリになっているようです。 1.基本機能デモ http://auduno.github.com/headtrackr/examples/facetracking.html 2.顔の位置と連動した立体表現デモ http://auduno.github.com/headtrackr/examples/sprites_canvas.html 3.顔の位
こんにちはー ちっとばかし社内体制変更がありまして以来です。ウエハラです (・ω・) の話は後回しにして!さっそく。 今朝、↓で紹介されてた アプリ風のなめらかなサイドメニューが実装できるjQueryプラグイン「mmenu」 http://phpspot.org/blog/archives/2013/05/jquerymmenu.html を試してみました(`・ω・´) 試したと言っても実際に使用してみたわけではなく、公式のdemoを端末で見てみたよレベルなのでタイトル通り「検証」ですー ■検証端末 ・ iPhone5(iOS6.1) ・ IS03(android2.2) ・ Xperia(android2.3) ・ Galaxy S3(android4.0) iPhone5(iOS6.1) ▼左メニュー ▼右メニュー 両サイドメニュー!動きも滑らかで良い感じです。 ▼下層リ
こんにちはGGです。 ちょっと短いですが困っていた問題が解決したので メモがてら書いておきます。 Androidのブラウザの仕様で、 Androidにはfont-weight:boldが適用されません。 「to-R」さんでも書かれています通り日本語だけ太字になりません。 http://blog.webcreativepark.net/2011/05/19-121154.html 代替案として、text-shadowを利用して回避する方法がありますが、 植原さんの記事に書いてある 【応用】Androidブラウザでviewportのwidth指定【しました】 対応がされていると、 ipadなどの高解像度の端末で見ると 拡大されテキストとtext-shadowの間隔が広がりテキストが2重に見えてします。 それを回避する為にCSSの以下のプロパティを指定します。 -webkit-text-stro
こんにちはーウエハラです。 朝起きて外が晴れてると、気温フル無視で薄着で外出しちゃうとこ直したいです(( ‘w`))サムイ 今回は、いつまで経ってもそれなりに悩む。 「縦方向の中央揃え」レイアウトについてです。天地中央ってやつですね。 コーディングってやっぱり癖とか趣味とかあって、普段支障がない状態だとなんだかんだ偏ったりしますよね。 私も例外ではないのですが、「今までやってなかったけどなるほどー!」な方法を知ったので書きます。 この方法は、cssのみで実現できます。 コーディングにおける縦中央配置の悩みどころの説明は省きます。 皆さんご存知と思うので( ´・ω・)w ちなみに私は、 「tableは流石に美しくないし、でもハックも嫌だし、かといってabsoluteでむやみに浮かすのも…しかもネガティブmarginかけなきゃだし、えーでもIE6,7の為だけにjs書くのも(ry」
こんにちはGGです。 スマホサイトの制作で スライドバナー実装することになり Flexslider を使わせて頂いたのですが、 動きを確認していた所、フリックした時にスライドを自動再生が止まってしまい 更新しないと自動再生してくれません。 google先生に尋ねてみると、下記の http://webmage.pro/さんの ブログを紹介してくれました。 http://webmage.pro/さんのブログを見ると、 jquery.flexslider.jsのver2.1以降はjquery.flexslider.js下部に書いてあるオプション部分の pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended. のtrue
こんにちは、コウワキです。 スマホサイトの制作だと、 ナビゲーションを上部に固定してスクロールについてこさせたり、 常にバナーを表示させたり、position:fixedを使いたいシーンがPCに比べて多いですね。 今日はそんなposition:fixedの話。 iOSはiOS5以降、Androidは2.2以降で使用できる はず の positon:fixedですが、 やっぱりですがちらほらバグがあったりします。 今回はiOSでのバグについて。 上に書いたとおりiOSでも5以降は positon:fixed使えるんですが、 ページを一旦スクロールしないとfixedされない というバグがあります。 例えば、 ・アンカーリンクでページ内飛んだ場合 ・scrollTop でページ内を強制的に移動させた場合 ・戻るボタンで戻ってきた場合 そんな時、positon:fixedを
今回は、現行のiPhoneと現時点での最新Android端末のスペックから、 最適なスマホ向けサイトのデザインサイズを考察します。 スマートフォン向けサイトをデザインする際にデザイナーがまず確認するのが、 想定の画面サイズとファーストビュー領域ではないかと思います。 ※ここでいうデザインには装飾だけではなく、ページ設計の意味も含み、デザイナーにはページの設計者の意味も含みます。 現状は、やはりまだ「iPhoneの画面サイズ」をスタンダードとする人が多いでしょう。 しかし、世界的に見てもAndroidの勢いが強く、さらにハイスペックな端末もドンドン発表されています。 今後発表される次世代の「Android端末の画面サイズ」がデザインのスタンダードになる日も遠くないかもしれません。 本記事の結論をいきなり書きますと ・現状のAndroid端末を基準にする際の想定ファーストビューサイズ
最近書かれた「to-R」のこちらの記事、見られた方も多いと思います。 ◆続:Androidブラウザでviewportのwidth指定 スクリプトの量は増えてますが以前書かれていたものよりスマートぽい! これはと思い早速スマホサイト構築で参考にさせていただきました。 が、どうもうまくいかない… 私が確認したGALAXY(android 2.3)では縦横切り替えても縦の小さい表示のまま。 用意されているサンプルでも同じくだったので、ここから改良を加えることにしました。 ▼元script var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgen
このページを最初にブックマークしてみませんか?
『http://sp.vitalify.jp/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く