画像をスクエアにトリミングしてサムネイル表示!的な超シンプルjQuery Pluginを書いてみた。

CMSから画像を登録して、表示するときには正方形にトリミングされたサムネイルを表示したい!というのがよくある相談です。
WordPressなんかだと、WordPress自体がPHPで物理的にサムネイル画像を作成するので問題ないんですが、オリジナルのCMSとか静的HTMLサイトとか、外部(FlickrとかTumblrなど)のサービスから画像だけを転載する場合なども、表示上だけ正方形で表示したい!なんて言われて面倒なんですよね。
既存のjQuery Pluginなども調べてみたけど、結構コッテリ(多機能)なPluginが無い。(検索能力が無いだけの可能性もある)

なので、アッサリ・サッパリ系のPluginを作ってみたわけです。

github: jquery.imgFitter.js
demo: jquery.imgFitter.js

動きとしては、
・IMGタグのSRCの画像を、CSSで背景画像に指定して、background-size: coverに設定。
みたいな感じ。ただそんだけ。

WordPressも超便利になってきた反面、システムとしてのボリュームがコッテリしてる。
PHPのフレームワークもそう。いろいろ肥大化してる。
だからマイクロフレームワークなんて言葉も出てくる。

マイクロ。この言葉、響き、結構好き。

ちょっと仕事が一段落したみたいなので、こういった単機能なマイクロツールを排出していきたいなぁと思う今日この頃。
みなさん今週も頑張りましょう。

今更ながら、InstgramのAPIを触ってみた。

自分のアカウントの写真をブッコ抜きなことをする場合にはOAuthが必要なんだけど、今回やりたいのは特定のタグ付けされた写真を引っこ抜くだけ。
なので、大げさに「触ってみた」なんてタイトルにしましたが、URL一個叩くだけです。

続きを読む 今更ながら、InstgramのAPIを触ってみた。

ライフハッカーさんが「ブラウザのホーム画面を時計にすると、いろいろ捗る」と仰るのでJS版を作ってみた。


https://blog.motoo.net/etc/homeClock.html

ブラウザのホーム画面を時計にすると、いろいろ捗る : ライフハッカー[日本版]という記事を見て、そこで紹介されているThe Colour Clockというサイトを眺めてみたけど、どうにもこうにもしっくりこない。たぶんFlashであることや、オフラインで使えないことや、時・分・秒をRGBに置き換えると時や分を超えるときに急な色変化があることなど諸々あったので、アイデアだけパク……参考にさせて頂いて、JS版を自分向けに作ってみた。

続きを読む ライフハッカーさんが「ブラウザのホーム画面を時計にすると、いろいろ捗る」と仰るのでJS版を作ってみた。

jQuery(というかJavascript)でヒートマップ(っぽいもの)を作ってみたよ。

普通のデザイナーさんならFlashで作るんでしょうがね(^^ゞ
特に難しいことはやってないんだけど、ネット上で探してみても誰もやってなさそうなので晒してみましたよ。

※白地図は「白地図、世界地図、日本地図が無料【白地図専門店】」から拝借。ちょっと古いみたいで、八女市が合併前の地図になってます。
※ヒートマップのデータは「福岡県警察 交通事故統計資料」の平成23年9月末現在のデータより、事故件数を拾ってます。

ソースは続きで。

続きを読む jQuery(というかJavascript)でヒートマップ(っぽいもの)を作ってみたよ。

要素を強制的にモニタの中心に配置する。

ブラウザの中心ではなく、モニタの中心。
アイデアレベルで作ってはみたものの、どうにもこうにも使いモノにならずお蔵入り。可哀想なので晒してみるテスト。

OSXだと、ウィンドウドラッグ中はscreenX, screenYが更新されないのね(´・ω・`)

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	setInterval(function() {
		var x = window.screenX || window.screenLeft;
		var y = window.screenY || window.screenTop;
		x = screen.availWidth  / 2 - x - 80;
		y = screen.availHeight / 2 - y - 100;
		jQuery('#force-center').css({'left': x +'px', 'top': y + 'px'});
	}, 10);
});
</script>
</head>
<body>
<div id="force-center" style="background-color:pink;border:3px solid red;color:red;font-size:10px;font-weight:bold;line-height:14px;position:absolute;height:60px;width:80px;text-align:center">意地でも<br />モニタの中心に<br />居座る<br />(・∀・)</div>
</body>
</html>

続きを読む 要素を強制的にモニタの中心に配置する。