週末撮った写真

NewImage

高円寺で見つけたカエルの置物。傘立て?らしいです。

NewImage

カフェオレが入ったマグカップが丸くてかわいかった。

NewImage

吉祥寺某カフェ。

NewImage

そのカフェ正面。ツーリング用のシャツの横がベンチでアンマッチ。

 

様々な雰囲気の写真が撮れるSuperPopCamとミニチュア写真を撮影、加工できるTiltShiftGeneratorを使って撮りました。

WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法


Caps

最近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がバッティングしていなければ動作すると思います。

続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”

AndroidアプリでWebViewが異様に重いときの解決Tips

仕事でアプリのWebViewを使ってサイト内コンテンツを表示したところ、動作もたついてしまった事例がありました。

そのときの解決法が思いのほか簡単だったのでメモがてら記載。

動作がもたついてしまう主な原因は

1.アニメーションのコンテンツがある。
2.CSSの設定が複雑。
3.CSSのエフェクトを使っている。

といったところが主な原因。

自分が仕事でぶちあたったのは3つ目で角丸にするborder-radiusと影をつけるbox-shadow,text-shadowを取るとかなり動作が解消されました。

その他JavaScriptで0.何秒毎に、、、といった処理を加えている場合も一度最適な数値をいろいろ試して導いてみると効果が出る場合があります。

今後、OSやブラウザーのアップデートと合わせ、WebViewの高速かも進むと思いますが、Webブラウザーで100%信頼できる動作もWebViewでは動かない場合があるので、認証や決済時に使う場合は注意が必要です。

  • Google+Androidアプリケーション開発入門+画面作成からデバイス制御まで――基本機能の全容
  • HTML5とJavaScriptによるiPhone%2FAndroid両対応+アプリ開発ガイド
  • アプリ%2FWeb開発者のための+フラットデザインガイドブック【iOS+7・Android・Windows+8対応】
  • Androidアプリ開発実践ノウハウ128
  • スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone%2FiPad%2FAndroid対応

linked by blog-tools

CSSフレームワーク less.js

Lessjs topx

cdbk.net CREATIVSのサイトにてJavaScriptを使ったCSSフレームワークの「less.js」を実装しました。

大量の設定が必要な場合はより複雑な構造かが必要なとき、非常に役に立ってくれるフレームワークで算術的な記述法やJavaScriptのように値を代入したりすることが可能です。(下の画像に実際の記述例がかかれています。)

Lessf

WordPressで使用しとうと試したところ何かが干渉しているのかそのままでは動作せず、、だったのでCMSなどで使う際は一度テストをしてから検討することをお勧めします。

Less.js

 

jQuery mobile 1.0が正式リリース – スマートフォン、タブレット向けUIライブラリ-

Jquerymobile

 

スマートフォンやタブレット向けのサイトを作る際のひとつの選択肢となる「jQuery mobile」がBeta版から正式版へとバージョンアップされました。

HTML5ベースのサイトで使用できるJavaScriptのjQueryをベースとしたフレームワークでHTML5の「data-role」属性やjQuery mobile独自の「data-theme」などでインターフェイスやカラーテーマなどを簡単に選択できるようになっています。

デモサイトに大まかな使い方とその実物があるので一度触ってみて検討するとよいかもしれません。

ブログ(WordPress)のデザイン(テーマ)をリニューアルしました。

SSHOPPStheme

今まで2、3カラムのレイアウトを使っていたのですが、思い切って1カラムのデザインにブログを変更しました。

最近気になっているブロガーサイト、Fashion Squadを参考に日本語で使える&画像を使わず、CSSのみでデザインしています。

デザイン周りの設定をCSS3でしているので古いブラウザーでは少し見た目がおぼつかない状態ですが、IE9、Chrome、FireFoxの最新版で問題なく閲覧できます。

ウィジェットをすべてページ下部に配置。その他、カテゴリーやアーカイブの表示は別途フッターにリスト表示を追加する予定です。(一応対応済)

未だ検証中ですが、時期を見計らってダウンロードできるようにしたいと思っているので要望、気になるところなどあればコメントいただけると幸いです。

よりいいものにするため、先行して5名様にテンプレートを提供します。

お問い合わせより連絡先(メアド)と用途、ブログの内容など教えていただければ、都度検討し返事いたします。締め切りはお問い合わせの数次第でおよそ一週間ぐらいにて。

タブレットやスマートフォン向けサイトを画面サイズに合わせて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ほどと大容量なところ。

無料トライアル版もあるので使用感を確かめてから購入できます。

 

宛名職人 for Mac(act2.com)

  • 宛名職人Ver.18
  • 宛名職人Ver.18 アップグレード版
  • 宛名職人Ver.18 乗換版
  • EPSON PM-A840 マルチフォトカラリオ インクジェット複合機
  • EPSON PM-G860 カラリオプリンタ インクジェットプリンタ
  • EPSON PM-T960 マルチフォトカラリオ インクジェット複合機
  • Canon PIXUS (ピクサス) MP830
  • EPSON PM-A940 マルチフォトカラリオ インクジェット複合機
  • EPSON PX-V780 カラリオプリンタ インクジェットプリンタ
  • EPSON PX-A740 マルチフォトカラリオ インクジェット複合機