著者:村上
【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利
画像を扱う際に、任意の大きさでトリミングしたい場合があるかと思います。
その時に便利なプロパティが「object-fit」です。
これを使えば、画像のトリミングがたった一行でできて、凄く便利！
なお、今回参考にしたサイトはこちら。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit
具体的な記述の仕方はこちら。
img {
width: 100px;
height: 100px;
// トリミング
object-fit: cover;
}
imgタグに対して、縦横100px、そして「object-fit: cover;」を指定しています。
こうすることにより、画像の縦横比を維持したまま、画像を100px × 100pxのサイズいっぱいに表示することができます。
また、object-position というプロパティを指定することで、表示する画像の位置を指定することもできます。
例えば下記のように指定した場合、
img {
width: 100px;
height: 100px;
// トリミング
object-fit: cover;
object-position: 100% 100%;
}
表示している画像が横長の場合は、右端の位置でトリミングしてくれます。
通常のトリミングでしたら、object-position を指定せず中央位置でトリミングで問題なさそうですが、どうしても画像の左側や上を見せたい！というときに使えますね。
ちなみに、object-position: [横の位置] [縦の位置]; という順番で指定します。
position とかいろいろ使わなくて済むので、コードもすっきりしておすすめです。
画像トリミングしたいときは、是非こちらを使いましょう。
著者:村上
【CSS】スタイルシート内で計算式が使えるcalc()が便利
Webページを作成している中で、この要素の横幅は画面サイズから20pxを引いたサイズにしたい！など、計算が必要となる場面があると思います。
その場合は、Javascript もしくは jQueryで処理をすることが多いかと思いますが、CSSの calc() という関数でも同じ処理を行えるというので試してみました。
まず、jQueryで要素のリサイズをする処理は下記のように記述していました。
なお、今回サイズを指定したい要素は、IDに「content」という名前が指定された要素にしています。
// 要素の横幅指定
var width = $(window).width() - 20;
$("#content").width(width);
で、同じ処理をCSSでは下記のように指定します。
#content {
width: calc(100vw - 20px);
width: -webkit-calc(100vw - 20px); /* iOS対応 */
}
ちなみに、vw とは、ビューポートの幅を 1/100 した単位のことです。
ビューポートの幅とは画面の横幅のことを指すので、100vw は 画面の横幅のサイズになります。
なお、画面の高さを取得したい場合は、100vh と記述してください。
個人的な感覚かもしれませんが、コードがすっきりしたように感じます。
見た目にも、何をしているのかが分かりやすいですし、私はこちらの方が好みですね。
もちろん、実行後の画面は jQueryでもCSSでも全く一緒なので、お好みの方を使えば良いかと思います。
私のように、Javascript側で要素のリサイズ処理をしたくない派の方は、是非こちらを使用してはいかがでしょうか。
著者:村上
【アプリ】Cordovaで開発したアプリを高速化するポイント
現在開発中のアプリがようやく完成間近の形になってきたので、機能以外の改善も行い始めました。
それがアプリの速度改善！
特にAndroidで動作させると遅いので、調べながらではありますが、手を付け始めています。
今回参考にしたサイトはこちら。
PhoneGapアプリのパフォーマンスを改善する10のポイント -Adobe MAX 2013
https://news.mynavi.jp/article/20130520-am2013pg/成功するPhoneGapアプリを開発するための高速化＆UXテクニック
http://blog.asial.co.jp/1142
どちらも2013年の記事なのでやや古めですが、参考になりそうな内容です。
で、まずは手っ取り早く試せそうなものを一つずつ試してみました。
1．ハードウェアアクセラレーションを意識してCSS Transitionsを利用する
具体的には、CSSに下記のスタイルを適応することです。
transform: translate3d(0, 0, 0);
このスタイルを追加することで、HTML DOMの描画にGPUが用いられるようになるとのこと。
そうすると、滑らかな描画を実現でき、さらにアプリの速度が大きく向上することもあるそうです。
ただし、あまり多くのHTML DOM要素の描画にGPUを用いると、GPU上の利用可能メモリーが埋まってしまう可能性があり、そうすると突然アプリがクラッシュする危険性もあるとのこと。
特に、深くネストされたDOM要素にこのスタイルを適応すると、上記のようにアプリがクラッシュすることがあるため、安易に追加するのは控えるべきですね。
2．Clickイベントは使用しない
スマートフォンのClickイベントは、画面がタッチされてから発生するまでに300msほどの遅延があるため、Clickイベントの仕様は、動作が遅くなる原因になります。
そのため、代わりにTouchStartを使用するか、FastclickなどのスマホでのClickイベントの応答速度を早くするライブラリを利用するのが良いとのこと。
ちなみに、開発中のアプリには、このFastclickを導入しています。
Fastclick の導入については、こちらを参考にしました。
スマホのクリック応答速度を劇的に速くしてくれる 『FastClick』 の使い方
http://phiary.me/fastclick-usage/
3．コンテンツのリフローを控える
リフローとは、要素の位置や大きさなどの再計算を行うことを指します。
リフローの計算は負担が大きいので、必要最小限に抑えるべきとのこと。
…これやってる…。
でも、この処理はどうしてもやらなければならないので、どうにかならないか確認しなければですね。
あとは、下記も効果的とのこと。
- DOM要素の数を減らす
- 深くネストされたHTML DOM構造を避ける
…これもやっちゃってるなぁ…。
これについては、コードを確認して、削れそうなところは削らねば。
4．テストする
最後のポイントとしては、実際のデバイス、実際のデータを使い、実際の環境でテストする、とのこと。
特に、少し古めのスペックが低めの端末でテストするのがよさそうですね。
私は、私用の端末はそこそこ良いものを買ってしまったので、案外サクサクと動いてしまい、あまり参考にならない…。
会社にあるテスト用端末をお借りしなければですね。
他にもまだ改善点はありますが、とりあえず私が試せたもの、確認したものは以上です。
とりあえず、リフローを改善しよう…！
私と同じくCordovaのアプリを開発している方は、是非参考にしてみてください。
著者:村上
【CSS】意外と使える背景画像のサイズを変更する方法
大した技術ではないのですが、個人的に使えると思ったのでご紹介。
タイトルにある通り、CSS の background-image で指定した画像のサイズを変更する方法です。
コードはこちら。
// 背景画像を 30px × 30pxに指定
background-image:url("背景画像のパス");
background-size:30px;
そのものずばり、background-size というプロパティを使います。
上記のコードを追加すると、背景に指定した画像のサイズが縦横30pxで表示されます。
また、上記のようにサイズをじかに指定する以外にも、パーセント指定や、contain、cover といった値も使用できます。
パーセントの場合は、背景画像が指定された範囲に対する画像の幅と高さをパーセンテージで指定できます。
containは、画像の縦横の比率は保持して、背景の範囲に収まる最大サイズになるように画像を拡大縮小してくれます。
coverは、画像の縦横の比率を保持するところまでは、contain と同じですが、こちらは背景の範囲を完全に覆う最小サイズになるように画像を拡大縮小してくれます。
用途によって使い分けてください。
なお、画像のサイズを、縦20px 横 40pxなど、正方形でないサイズで指定したいときは、下記のように指定します。
// 背景画像を 縦20px 横 40pxに指定
background-image:url("背景画像のパス");
background-size:40px 20px;
横のサイズ 縦のサイズ、の順番で記載します。
今回は、グラフのマス目を背景画像を指定して表現するというときに、このプロパティを利用しました。
background-size を使えば、マス目の大きさを変えたいときに、元画像自体を編集することなく、CSSのみで調整することができます。
ちょっとしたことですが、意外と汎用性が高そうです。