前回、nginx_image_filterで画像のリサイズをするっていう記事を書いたけど、
前回の記事だと元画像よりも大きく拡大したいという事が出来ないという問題が発生してしまう。
なのでこれを解決するにはngx_small_lightというnginxのモジュールを使用することで可能になる。
けどこれを使うにはnginxの再コンパイルが必要になるという感じで中々に面倒なので、
今回はngx_small_lightを入れてnginxを再コンパイルして、small_lightで変換するまでのお話をば。
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。
Home > Archives for 8月 2015
2015年8月29日土曜日
ec2にngx_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だと折り返さなかったりするっていう状況であったり。
けどこれをどうにか解決するには的なお話でも。
Adsense
Adsense
Popular Posts
- ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる
- 面倒なテーブルタグの簡単な作り方
- jquery.hashchange.jsを使ってDOMの状態記録?的なことをする
- XMLを読み込んだときにエラーが出る、もしくは読み込めない。(EntityRef問題)
- Macの起動ディスクの容量を確保するために、sleepimageの削除および設定
- json_decodeをする際になぜかエラーが発生してちゃんとデコードしてくれない的なお話
- ブログデザインを動的ビューに変更したら諸々と
- javascriptで子ウィンドウが閉じているかどうかを確認して、閉じてたら何かしたい的なお話
- font-awesomeをcssのbackgroundとして使う的なお話
- jQuery1.9以上はbind・live・delegateをonで書きましょう的な話
Amazon
Labels
- Javascript
- React Native
- AWS
- PHP
- jQuery
- expo
- fuelphp
- React
- Titanium
- iOS
- TypeScript
- webアプリ
- firebase
- jQueryプラグイン
- Node.js
- レビュー
- CSS3
- MySQL
- iPhoneアプリ
- Mac
- Xcode
- golang
- Android
- Blogger
- Facebookアプリ
- webpack
- webサービス
- 購入物
- .htaccess
- HTML
- HTML5
- bootstrap
- wordpress
- Androidアプリ
- Macアプリ
- SQLite
- github
- npm
- アプリ紹介
- サーバ
- Music Hack Day
- docker
- heteml
- iPhone
- python
- react-native-unimodules
- sublime
- 勉強会
- 画像処理
- Apache
- Bitrise
- CSS
- ESLint
- Echo Nest
- FQL
- Linux
- ScrollTween
- SoundCloud
- electron
- ffmpeg
- hooks
- json
- nginx
- redis
- swift
- ゲーム
- スパム
- テンプレート変更
- ブラウザ
- 技術書典
- API Blueprint
- Apple Silicon
- DMM mobile
- Facebookプラグイン
- Gracenote
- IE8
- LESS
- Quirky
- SIM
- SendGrid
- Spotify
- bonjour
- getstage
- googleアナリティクス
- hackathon
- iPad
- iQON
- iScroll
- imagemagick
- jQuery UI
- jQuery mobile
- kampa
- lua
- musiXmatch
- prisma
- rsync
- slack
- spreadsheet
- ssr
- surface
- wasabeat
- windows
- エイプリルフール
- スマホ
- ハッカソン
- ハースト
- パララックス
- ファミマ
- 中華まん
- 動画
- 動的ビュー
- 応募
- 教えて