新しくなったCreateJSのイベントリスナーを理解しよう

少し遅くなりましたが、先日CreateJSの新バージョンが公開され、EaselJSのバージョンは0.6.0となりました。新バージョンのEaselJSには様々な新機能が追加されていますが、その中で最も大きな変更点は、EventDispatcherクラスの追加と共にイベントリスナーの仕組みが導入された点でしょう。今回は、いくつかのサンプルを通してEaselJSのイベントリスナーの使い方をご紹介したいと思います。

無料のCDN CloudFlareでWordPressを高速化しよう

最近、話題になっている無料のCDNサービス CloudFlareをkudox.jpに導入してみました。CloudFlareは、画像・JS・CSSといった静的なコンテンツの一部をCloudFlareのサーバーにキャッシュすることで、負荷を分散してくれるCDNサービスの一種です。WordPressで使用した場合、どれくらいの高速化が見込めるのでしょうか?驚きの結果をご報告したいと思います。

プラグインで超簡単!WordPressをキャッシュで高速化しよう

WordPressはPHPで構築されており、ユーザーのリクエストに応じて動的にページを生成しています。そのため、静的なHTMLに比べてレスポンスは遅くなりがちですが、キャッシュ系のプラグインを使用することで簡単に高速化を計ることができます。今回は、kudox.jpの高速化を目指して導入したキャッシュ系のプラグインとその設定をご紹介したいと思います。

CSS3のMedia Queriesを使ったレスポンシブレイアウト

Media Queriesを使ったレスポンシブレイアウトの例

少し時間が空いてしまいましたが、今年に入ってkudox.jpのWordpressテーマをCSS3のMedia Queriesを使ったレスポンシブレイアウトでリニューアルしました。私自身、Media Queriesを使うのは初めてだったこともあり、いろいろと勉強しながら作業を進めました。そこで学んだことや私なりに考えたことをレポートしていきたいと思います。

新しくなったTwitterウィジェットをカスタマイズしよう

これまで私は、ブログへのTwitterタイムラインの埋め込みにデザインの自由度が高いblogger.jsを使用していたのですが、Twitter API ver1.1への変更をきっかけにTwitterの公式ウィジェットを使うように変更しました。新Twitter公式ウィジェットは、設定できるオプションが少ないと思われるかも知れませんが、HTMLを直接編集することでデザインをカスタマイズできるオプションが用意されています。

スマホ対応するならCSSでword-wrap:break-wordを指定しよう

最近、スマホ対応の案件が当たり前のようになってきました。スマホ対応する際に指定しておくと誰かを幸せにできるかもしれないCSSプロパティにword-wrapがあります。PCのディスプレイのみをターゲットにしていた時代では、あまり馴染みのないプロパティですが、スマホではword-wrapを指定しないとどのようなケースにどう表示されてしまうのでしょうか?kudox.jpのケースを例にして確認してみましょう。

公開中のWordPressをコピーしてローカルにテスト環境を構築する

WordPressサイトをリニューアルする場合、公開中の記事などをそのままローカルにコピーして作業したいところです。先日、私もkudox.jpのテーマをリニューアルしたのですが、ローカルにテスト環境を構築したおかげで、かなりスムーズに作業することができました。今回は、公開中のWordPressをコピーして、ローカルにテスト環境を構築する手順を紹介したいと思います。

EaselJS用のVector3Dクラスを作ったよ

3Dの勉強も兼ねて、EaselJS用のVector3Dクラスを作ってみました。Vector3D for EaselJSは、JavaScriptファイルを読み込むだけで、EaselJSにActionScript3.0と同様のVector3Dクラスを追加することができます。ライセンスフリーで公開していますので、商用であっても無料でお使い頂けます。

超簡単!HTML5のvideo要素を使って動画を配信しよう

以前は、HTMLで動画を配信するにはFlash等のプラグインを利用する必要がありました。しかし、HTML5ではvideo要素を使うことでプラグインなしで動画を配信することができ、スマートフォンやタブレットでも見ることができます。今回はHTML5 video要素の使い方をレポートしたいと思います。

動画をHTML5 video用のmp4, webmに変換できるフリーウェア XMedia Recodeの使い方

HTML5のvideoタグを使うとプラグインを使わずにムービーを再生することができますが、現時点では動画形式・コーデックが規格として統一されておらず、mp4形式とwebm形式でムービーファイルを用意する必要があります。今回は、Windows用のフリーウェアであるXMedia Recodeを使って、ムービーファイルをHTML5 video用のmp4, webmに変換する方法を紹介したいと思います。