Notes

JavaScriptのアニメーション用ライブラリ「TweenMax」。

2016.04.19 / Notes

高機能アニメーション用ライブラリ「TweenMax」を使ってみました。
JavaScriptによるアニメーションのライブラリはいくつかありますが、その中でも「TweenMax」はパフォーマンスも高く、機能も豊富です。
サンプルはこちら

 

単純なアニメーションであれば、下記のように書くことができます。

もう少し複雑なアニメーションの場合には、TimelineLiteクラスを利用したほうが良いかもしれません。

TimelineLiteクラスでは、メソッドチェーンで連続したアニメーションを作成できます。

 

上記では「TweenMax」「TimelineLite」を使っていますが、その他に「TweenLite」「TimelineMax」があります。
名称の通りMaxが付く方が全機能版で、Liteは軽量版になります。
SVGやCanvasにも使えるので、アニメーションの作成には重宝しそうです。

 

TweenMax(GSAP)

Drupal8でTwigキャッシュの無効化。

2015.11.16 / Notes

Drupal8でテーマ作成時などに、Twigのキャッシュを無効化する際のメモです。
次の2点のファイルに、それぞれ記述します。

 

sites/default/settings.php

 

sites/development.services.yml

上記を記述後に「管理 > 環境設定 > パフォーマンス」ページで、一度だけキャッシュをクリアーする必要があります。

JavaScriptライブラリの読み込みにCDNを活用。

2015.07.17 / Notes

jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。

 

主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。

 

jQueryの最新版をそれぞれ読み込む場合、次のようになります。

 

複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。

 

jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。

DrupalでSEO対策に便利なモジュールいくつか。

2015.05.31 / Notes

Drupalでサイトを構築する際に、SEO対策として導入すると効果のあるモジュールを紹介します。

 

Pathauto
コアモジュールの「Path」でノードごとにURLエイリアスを付けることができますが、「Pathauto」ではURLエイリアスの命名をパターン化して、自動で付けることができます。
Global Redirect
各ノードにURLエイリアスを付けた際でも、もともとの「/node/1」のURLでもアクセスできてしまいますが、このモジュールでは強制的にURLエイリアスに転送してくれます。
Page title
コンテンツのタイトルとは別に、head内のタイトルを設定することができます。コンテンツタイプごとにパターンを設定することもできます。
Metatag
各ページのDescriptionなどのMetaタグを詳細に設定することができます。SNS向けのOGPにも対応しています。
Menu attributes
サイト内のメニュー項目に対して、Nameなどの属性を追加することができます。ID、Classも付加できますので、CSSでデザインする場合にも有効です。
XML sitemap
検索エンジンのクローラー向けに、XMLサイトマップを自動生成してくれます。コンテンツタイプや、個別ノードごとに含めるかどうかの設定もできます。