2015年8月29日土曜日

ec2にngx_small_lightを使用して、画像のリサイズ(縮小・拡大)をする画像サーバを立てる的なお話

  • このエントリーをはてなブックマークに追加

前回、nginx_image_filterで画像のリサイズをするっていう記事を書いたけど、
前回の記事だと元画像よりも大きく拡大したいという事が出来ないという問題が発生してしまう。
なのでこれを解決するにはngx_small_lightというnginxのモジュールを使用することで可能になる。

けどこれを使うにはnginxの再コンパイルが必要になるという感じで中々に面倒なので、
今回はngx_small_lightを入れてnginxを再コンパイルして、small_lightで変換するまでのお話をば。

nginx_image_filterを使って、s3上にある画像を簡単にリサイズしたりクロップしたりするサーバを作る的なお話

  • このエントリーをはてなブックマークに追加

画像をリサイズして表示したいことって多々あると思う。
例えばそんな大きい画像を表示しないところでは横320pxやら、サムネイル一覧やら。

けどそれを作ろうとするとなると、基本的にはローカルの画像をごにょごにょしないといけない。
で、ごにょごにょしてheaderを弄って表示するって感じで中々に面倒だし、
ec2を使っているとなるとそもそも静的ファイルはs3に置いてあるからローカルに保存するとか手間だし、
何よりも生成したリサイズ画像を消さないとec2のサーバ容量を圧迫してしまうとか。

けどnginxのimage_filterを使う事で、そんな煩わしい事もないし、
むしろPHPでごにょごにょすることがなく簡単ということで、今日はそのお話をば。

2015年8月26日水曜日

$(window).resize()は使わず、window.matchMediaを使って、jsでのメディアクエリー的な事をしてみよう的なお話

  • このエントリーをはてなブックマークに追加

cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。
けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、
$(window).width()で条件分岐してあげるって考えるけど、
画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、
resizeはwindowサイズが変わるたびにイベント発火するし、
そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。

まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、
それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。
ということで今日はそのwindow.matchMedia()の使い方についてをば。

2015年8月25日火曜日

ec2にs3のバケットをマウントして使ってみる的なお話

  • このエントリーをはてなブックマークに追加

webアプリケーションを作っているときに、
大体はec2+s3みたいな感じでメディアファイルをs3に逃がし、
さらにec2は負荷分散ということでロードバランサーを使うという大体定番なセットを使う事が多い。

けどそんなwebアプリでは大体画像をアップするとかがあったりする。
その場合はs3に画像をアップするにはアプリからs3にpostするプログラム(fuelphpを使ってs3にファイルをアップする記事はこちら)を作らないといけないが、
環境によっては面倒だし、PHPだとAWS SDKを使わないといけないけど面倒だったりもする。
というか画像加工をするには一旦手元というかec2上に置いて、ごにょごにょしないといけなかったり。

そんな面倒なことを簡単にするためにもec2上にs3をマウントすれば解決出来るので、今日はそのお話をば。

2015年8月20日木曜日

lineで送るボタンを設置する際に、このやり方でやると失敗するよ的なお話

  • このエントリーをはてなブックマークに追加

TwitterやFacebookのシェアボタンと同じく、LINEで送るボタンは今じゃどこでも設置されていて、
けどこれって本当にみんな使ってるのかな?と個人的には疑問に思っているけど、
でも設置すると良い的なみたいなお話であったりする。

まぁまぁそこら辺は置いておいて、
このLINEで送るボタンだけど、とあるやりかたで設置するとうまく機能しないよ的なことがあるので、今日はそのお話をば。

テーブルのセル内でURLなど改行せずにはみ出してしまう問題を解決する的なお話

  • このエントリーをはてなブックマークに追加

レスポンシブでサイトを作っているときに、中々にネックになってくるのがtable。
というのもスマホだと画面サイズによっては2カラムでも厳しかったりしたり。

で、まぁ2カラムくらいだったら耐えられるだろうと作ってみても、URLなどが入力されてるとはみ出てしまう事が多々あり。
white-space:normalとしてもURLだと折り返さなかったりするっていう状況であったり。

けどこれをどうにか解決するには的なお話でも。

2015年8月6日木曜日

とあるエンブレムをCSSのみで描くみたいなことをやってみた的なお話

  • このエントリーをはてなブックマークに追加

とあるエンブレムが話題になっているけど、これをCSSで配置しよう的なものを作ってみた。
綺麗に一つで書けたらいいなとは思ったけど出来なかったので、
9つのグリッドで考えるという方法でやってみた。

ということでソースなどは下記から。

Adsense