最近滞ってしまっていた年賀状デザインを３種ほど追加しました。
今週中にNenga. 皆と違う年賀状 にも掲載いたします。
月: 2011年11月
週末撮った写真
高円寺で見つけたカエルの置物。傘立て？らしいです。
カフェオレが入ったマグカップが丸くてかわいかった。
吉祥寺某カフェ。
そのカフェ正面。ツーリング用のシャツの横がベンチでアンマッチ。
様々な雰囲気の写真が撮れるSuperPopCamとミニチュア写真を撮影、加工できるTiltShiftGeneratorを使って撮りました。
WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法
最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。
//初期表示設定 function jumpin_set(){ $(".jumpin").each(function(){ //指定するクラス var img_w = $(this).width(); //デフォルトの画像幅取得 var img_h = $(this).height(); //デフォルトの画像高取得 $(this).attr({"data-h":img_h}); //デフォルトの画像高を属性として保存 $(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小 }); } $(document).ready(function(){$(window).load(function(){ setTimeout(function(){ jumpin_set(); }, 100); });$(".jumpin").hover(function(){//マウスオーバー時の動作 var img_w = $(this).width(); var img_h = $(this).height(); var next_h = $(this).attr("data-h"); if(next_h){ $(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic"); $("img",this).animate({height:img_h},100).animate({height:next_h},100); $(this).removeAttr("data-h"); } }); $(".jumpin").mouseout(function(){//マウスアウト時の動作 var img_w = $(this).width(); var img_h = $(this).height(); $(this).attr({"data-h":img_h}); $(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic"); }); });
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
AndroidアプリでWebViewが異様に重いときの解決Tips
仕事でアプリのWebViewを使ってサイト内コンテンツを表示したところ、動作もたついてしまった事例がありました。
そのときの解決法が思いのほか簡単だったのでメモがてら記載。
動作がもたついてしまう主な原因は
1.アニメーションのコンテンツがある。
2.CSSの設定が複雑。
3.CSSのエフェクトを使っている。
といったところが主な原因。
自分が仕事でぶちあたったのは３つ目で角丸にするborder-radiusと影をつけるbox-shadow,text-shadowを取るとかなり動作が解消されました。
その他JavaScriptで0.何秒毎に、、、といった処理を加えている場合も一度最適な数値をいろいろ試して導いてみると効果が出る場合があります。
今後、OSやブラウザーのアップデートと合わせ、WebViewの高速かも進むと思いますが、Webブラウザーで100％信頼できる動作もWebViewでは動かない場合があるので、認証や決済時に使う場合は注意が必要です。
linked by blog-tools
CSSフレームワーク less.js
cdbk.net CREATIVSのサイトにてJavaScriptを使ったCSSフレームワークの「less.js」を実装しました。
大量の設定が必要な場合はより複雑な構造かが必要なとき、非常に役に立ってくれるフレームワークで算術的な記述法やJavaScriptのように値を代入したりすることが可能です。（下の画像に実際の記述例がかかれています。）
WordPressで使用しとうと試したところ何かが干渉しているのかそのままでは動作せず、、だったのでCMSなどで使う際は一度テストをしてから検討することをお勧めします。
jQuery mobile 1.0が正式リリース – スマートフォン、タブレット向けUIライブラリ-
スマートフォンやタブレット向けのサイトを作る際のひとつの選択肢となる「jQuery mobile」がBeta版から正式版へとバージョンアップされました。
HTML5ベースのサイトで使用できるJavaScriptのjQueryをベースとしたフレームワークでHTML５の「data-role」属性やjQuery mobile独自の「data-theme」などでインターフェイスやカラーテーマなどを簡単に選択できるようになっています。
デモサイトに大まかな使い方とその実物があるので一度触ってみて検討するとよいかもしれません。
ブログのコメント機能をFacebookのものに変更しました。
ブログのコメント機能をTwitter連動型からFacebookのものに変更しました。
コメントの表示はfacebookで設定しているプライバシーの設定に依存するので、公開にしているものはログインしていない人に対しても見える状態になってしまうのでその点はご注意ください。
取り急ぎ記載。
タフなiPod touch用ケース Survivor _ iPod – Griffin Technology
いいケースが無いか探していたところ発見した見るからにタフなケース。
雨や衝撃から守ることができますが、どうやら水圧には対応していない様子。
Griffin Technology Survivor for iPod touch 4G – Black GRF-SRVVR/BC-T4-BK
bookmarked. Charlie Rose – Zuckerberg | Ivan
via ivan.freshnet.se
気になったので
ケトル no.3
Libertinesという雑誌が無くなり「ケトル」という雑誌が出来ていた。
前誌は少し鋭い印象があったけれど、こちらはいい意味でゆるさや余白があるような印象。
今号は文房具の特集。来号は会社。
ブログ(WordPress)のデザイン(テーマ)をリニューアルしました。
今まで２、３カラムのレイアウトを使っていたのですが、思い切って１カラムのデザインにブログを変更しました。
最近気になっているブロガーサイト、Fashion Squadを参考に日本語で使える＆画像を使わず、CSSのみでデザインしています。
デザイン周りの設定をCSS3でしているので古いブラウザーでは少し見た目がおぼつかない状態ですが、IE9、Chrome、FireFoxの最新版で問題なく閲覧できます。
ウィジェットをすべてページ下部に配置。その他、カテゴリーやアーカイブの表示は別途フッターにリスト表示を追加する予定です。（一応対応済）
未だ検証中ですが、時期を見計らってダウンロードできるようにしたいと思っているので要望、気になるところなどあればコメントいただけると幸いです。
よりいいものにするため、先行して５名様にテンプレートを提供します。
お問い合わせより連絡先（メアド）と用途、ブログの内容など教えていただければ、都度検討し返事いたします。締め切りはお問い合わせの数次第でおよそ一週間ぐらいにて。
タブレットやスマートフォン向けサイトを画面サイズに合わせてviewportを変える際のTips
タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。
デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。
一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。
自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅をviewportにJavaScriptで振り分ける方法が比較的簡単に適応できる方法だとわかりました。
JavaScriptで window.orientation を使うと角度が取得できる。
自分が検証に使った端末は横長のときに0度or180度、
縦長のとき90度、-90度と表示されていたので、
縦横が入れ替わらない場合の設定は（jQuery使用）
var orientation = window.orientation;
//角度の取得if((orientation == 0)||(orientation == 180)){
//横長のときの設定
var hscale = $(window).width();
var wscale = $(window).height();
}else{
//縦長のときの設定
var wscale = $(window).width();
var hscale = $(window).height();
}
var viewport = $(‘meta[name=”viewport”]’);
$(全体幅を指定している要素).css({width:wscale});
viewport.attr(‘content’, ‘width=’+wscale+’, initial-scale=1, maximum-scale=1′);
といった感じで設定。
よりシームレスにするには画面幅に応じていくつかレイアウトデザイン(max-width?など)を定めた上で行うと効果的。
未だ少し理解できていないAndroid OS2.Xと3.Xのブラウザのviewport周りの挙動についてわかり次第またかきます。
Macで年賀状、はがきを印刷するなら宛名職人
Nenga. 皆と違う年賀状 を運営している身ではありますが、新卒のときに買ったプリンタについていた宛名職人がLionで使えなくなってしまったので今回新たに「宛名職人 Ver.18」を購入。
決めてしまった理由は・・・
・パソコンのアドレス帳と住所録との連携が楽々なところ。
・年賀状や暑中見舞いのみならずさまざまなテンプレートが用意されている（使わないけど・・・）
・名刺やラベルにも対応しているところ。
・オンラインでテンプレートを追加できるところ。
など、CD-ROMが付属した年賀状ムックを買うよりもかなり便利で充実した機能をつかうことができるアプリケーション。
個人的には毎年アドレス帳や去年の年賀状をみて送り先を一つ一つ確かめ、入力していた作業がアドレス帳と同期がとれることでかなり楽になるのがうれしいところ。Macであれば、YahooやGoogleのアカウントと同期がとれるようになっているのでGmailなどと問題なく住所録を共有することができます。
また、プリインストールされているテンプレートも豊富で、それ以外にもダウンロードサービスから新たにテンプレートを追加することができます。
気になったところはダウンロード版を購入したときのデータが1GBほどと大容量なところ。
無料トライアル版もあるので使用感を確かめてから購入できます。
