市川ウェブデザイン

カクカクしないスムーズな動きをするアニメーション

アニメーションを作った時に、「どうも動きがカクカクすることがあるなー」と思っていました。今回、どうやったらスムーズな動きになるのか実験しました。

アニメーションのデモです。更新もしくはReloadボタンを押すと違いがわかりやすいです。

Leftプロパティによる指定

今までleftやrightによる指定でアニメーションを作っていました。例えば、left:0pxからleft:500pxへ移動みたいな感じです。この方法だと動きがカクカクしますね。

TransformプロパティのtranslateX値による指定

今回はじめて試しましたが、動きがスムーズになりましたね。完全にスムーズになってはいませんが、Leftプロパティよりも改善されたと思います。ちなみに、先程の例だと、transform: translateX(0)からtransform: translateX(500px)となります。

まとめ

正直、ローカル環境で作成したときは、両方に違いを感じませんでした。しかし、レンタルーサーバーにアップロードしてインターネットで見ると違いがわかりました。そういうことでいえば、サーバー、ネット環境などの他の要素が大きい可能性はあります。まあ、transform: translateXで指定すれば問題ないでしょう。

 

JavaScript、CSS、jQueryによるアニメーション

ウェブサイトで、よく使われるアニメーションですが、JavaScript、CSS、jQueryの3種類でそれぞれコーディングしてみました。今回はその感想を書きます。ちなみにウェブ業界でいうアニメーションとは、連続して動くことです。

まずはアニメーションのデモです。

JavaScript

なんとかアニメーションを作ることができましたが、動きの秒数とか細かい指定が出来ません。調べてもわかりませんでした。本当は下の2つと同じ動きにしたかったのですが、私のスキルではこれが限界です。

CSS

JavaScriptの知識が無くても作れるので、難易度は低いです。また、途中で動きを変化させるなど細かい設定が出来ます。その点は良いですが、他の動作(イベント)と関連させるのは面倒です。例えば、ボタンをクリックしたときに動作させる時やスクロールしたときに動作させる時などです。

jQuery

CSSほど細かい設定は出来ませんが、大概のことは可能です。なんといっても他の動作(イベント)と関連させることが簡単に出来ます。その辺も考慮すると全体的にはjQueryが使いやすいです。

まとめ

JavaScriptはちょっと使えないです。動きの滑らかさは、CSSが良かったです。細かい指定もできるし、本当はCSSで書きたいのですが、総合的に考えるとjQueryですかね。理想は、CSSで書いて、他の動作(イベント)と関連させるにはjQueryを使うのが良いです。しかし、面倒なんで全部jQueryでコーディングするのが現実的ではないでしょうか。

 

 

迷惑メール対策2

以前、迷惑メールが頻繁に来るので、対策としてチェックリストを追加しました。

以前の記事:迷惑メール対策

しかし、これだけだと迷惑メールは無くならなかったので、今回新たに対策を講じました。

お問い合わせフォームに確認画面を追加

自分で確認画面を作るのは面倒だったので、プラグインで対応。「MW WP Form」というプラグインを導入しました。

  

 

確認画面のボタンを押すと

 

確認画面に送信するボタンが表示されます。

 

要はお問い合わせフォームから2ページを経て送信される仕組みにしました。これで、迷惑メールがなくなるか、しばらく様子を見ます。

 

今さらですが、OGP設定しました

ブログ記事をFacebookやTwitterに投稿するときには、OGP設定をすると効果的に表示されます。そろそろこのブログをSNSと連動させていこうかと思うので、OGP設定しました。

OGP設定はどうやるのか?

ウェブサイトのヘッダーにこんな感じでコードを書けばOKです。細かいことは省略します。

しかし、meta要素のproperty属性はいつからあったのでしょうか?私がHTML5の資格を勉強しているときは、無かったです。

個人的には見慣れないコードですが、コード自体は簡単です。普通のHTMLファイルだったら問題ないです。しかし、WordPressだとPHPを書く必要があって、非常にめんどうになります。

ということで、「All in One SEO Pack」というプラグインを使って、OGPの設定をしました。

「All in One SEO Pack」を使って設定

こんな感じで地道に入力していきます。

All in One SEO > ソーシャルメディアから各項目を設定すればOKです。

あとは、ウェブサイトorブログ記事のURLをTwitter、Facebookに貼り付けると、こんな感じで自動で表示してくれます。

ブログ記事をFacebookやTwitterに投稿するときに、見栄えが良くなります。

ちなみにGoogle+は、OGP設定しなくても勝手に表示してくれます。

 

WordPresssの更新って面倒ですよね。

今日は、自分が管理しているWordPressの更新作業を行いました。大きな声では言えませんが、数ヶ月の間、放ったらかしていました。

まあ、クライアントのサイトではなく、自分が所有しているサイトなので、つい後回しにしています。しかし、やっぱり対応しないといけないですよね。

普通にHTML,CSSで作ったウェブサイトだと、特に更新する必要はないので、運用がラクです。

しかし、WordPressで作ったサイトだと、そうはいかないです。頻繁に更新する必要があります。特にWordPressは攻撃を受けやすいので、セキュリティ対策として更新する必要があります。

更新といっても、具体的に何をやるのかというと、

  • WordPressの更新
  • WordPressに導入しているプラグインの更新
  • PHPの更新

こんな感じですかね。このうち、PHPの更新は、頻繁には起きません。たまに更新する程度です。

ただし、これらの更新は、単純にそのまま更新すれば良いわけではありません。何かあっても大丈夫なように、事前にバックアップを取る必要があります。

WordPressのファイルとデータベース(MySQL)のバックアップを取る必要があります。

運用しているWordPressで作ったサイトが、1つならまだマシですが、何個もあると結構めんどくさいです。下手したら半日かかりますね。

WordPressの更新作業を行ったからといって、ウェブサイトの見た目に変化を起きません。非常に地味な作業です。

見た目に変化が起きず、地味な作業なので、つい疎かにしてしまうのですが、いざトラブルが起きた時、

なんでWordPressの更新をしなかったんだ!

と、死ぬほど後悔することになります。なので、皆さんWordPressの更新はやりましょう。

たぶん、ほどんどの人はやっていないと思うので・・・