motooLogue

タグ: jQuery

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

    画像をスクエアにトリミングしてサムネイル表示！的な超シンプル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一個叩くだけです。

    (さらに…)

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


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

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

    (さらに…)

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

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

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

    ソースは続きで。

    (さらに…)

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

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

    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>

    (さらに…)

  • Twitter検索結果をティッカー表示できるウィジェット作ったよ。

    「Twitterのハッシュタグで検索した結果のツイートをティッカーで表示したいの。」

    とのご相談を受けまして、自分で作るよりも優良なウィジェットを誰か作ってるんだろうなと思って調べてみたのですよ。

    「twitter ティッカー」で検索して、「こりゃいいわ」と思ったのはA jQuery Twitter Tickerだけど、横に流すタイプのティッカーをご所望でしたのでNG。たぶん、見た目・機能的にはTwit-Tickerなんだけど、Twitterの検索結果ではなく特定のアカウントによるツイートなのでNG。機能的にはiTICKERなんだけど、デザインのカスタマイズができないからNG。

    意外と要望にピッタリンコなウィジェットが無いから自前で制作することになりました。

    「ディスカウントするから、自サイトで公開してもいい？」と尋ねたところ、快くOK頂きましたので公開することになりました。

    ↑「@masason OR from:masason」だとこげな感じ。

    配布用のサイトも作ったので使ってみればいいと思うよ。
    （ちゃんと動くかどうかは知らんけどね）

  • 消えたjQueryプラグイン「GalleryView」を追え！

    ボク的には結構お気に入りだったjQueryプラグイン「GalleryView」を配信していたサイトが「This Account Has Been Suspended」というメッセージだけを残して消えてす。管理人の@jackwandersも、2011年3月15日のツイートを最後に沈黙してます。とは言っても年に数回のリリース告知しかツイートしてない人ですが……。

    [追記 2012.02.15] いつのまにやらjQueryプラグイン「GalleryView」を配信していたサイトがさらにパワーアップして復活しとります！！

    jQuery Pluginsのサイトの検索にも引っかからないので、結構探すのに苦労しそう。

    GalleryView公式サイトで公開していた多くのサンプルが昇天してしまったので、Googleのキャッシュ等からなんとか復活の呪文を唱えてみます。

    ※サンプルの画像はlorempixum – placeholder images for every caseから拝借してます。
    ※以下の和訳は超いいかげんなので、間違いがあっても笑って見過ごしてくださいw

    (さらに…)