【jQuery】パララックスなwebサイトを作れるjQueryプラグイン「jQuery-Parallax」

こんにちは。

最近、ウェブデザイン系のブログやニュースを見ているとパララックスという言葉をよく目にします。パララックスというのは「視差効果」のエフェクトのことで、

複数の画像や文章のスクロール量を個別に変化させることで、奥行きのある立体的なデザインが可能となる、というものです。

そんなパララックスを施したサイトを作るためのjQueryプラグインが「jQuery-Parallax」です。

まずはデモサイトです。

http://www.ianlunn.co.uk/plugins/jquery-parallax/

 

かっこいいですね。以前の nikebetterworld.comをベースにして作成したものだそうです。

内容をみてみると各要素にスクロール速度が設定してあって、特に靴の部分のアニメーションが立体的に見える働きをしています。

サイト訪問者の目を惹きつけ、下のコンテンツをもっと見たくなるような、好奇心を起こさせる働きがありそうです。

 

とういわけで、今回このjQueryプラグインを使ってwebページをひとつ作ってみました。

こちらです。

 

※製作途中ですので、構成が変わる可能性があります。

 

香炉についての新しい使い方を提案したサイトです。香炉は実際にAmazonやPaypal(クレジットカード)で購入できるので、ぜひどうぞ。

更にコンテンツを追加したいのですが、サイト訪問者を飽きさせずに最後まで見てもらうためには、もう少し変化のあるアニメーションが必要かもしれません。

 

ストーリーに沿った内容のwebサイトを作りたいときなんかに適しているのではないでしょうか。

jQuery-Parallax」 チュートリアル http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

 

【jQuery】Preziのようなアニメーションを実現するjQuery「jmpress.js」

こんにちは。今回はjQeryプラグイン「jmpress.js」を紹介します。 このjmpress.jsはimpress.jsのjQuery版で、ウェブページを一枚のキャンバスに見立て、様々なアニメーションを展開してコンテンツを表示します。まずはデモページを見ていただいたほうがはやいと思います。

 

http://jmpressjs.github.com/jmpress.js/#/home

 

※矢印キーまたはスペースで操作します。

 

 

 

 

 

まさにアニメーションがPreziのようです。というのも、実際にこのプラグイン制作者はPreziにinspireを受けて制作したからだそうです。私も試しに作ってみました。(デモを多少改良しただけですが。)

 

http://demo006.hotcom-web.com/#/step-1

 

 

 

目が回って気持ち悪くなった方申し訳ありません。

コンテンツをボックス要素で囲み、位置情報をdata属性で指定してやれば動くので、思ったよりシンプルな構造でした。また、アニメーションのオプションが豊富にあって多様な動きが実現出来ます。ただ、アニメーションや角度をつけてぐるんぐるん回転させすぎると目が回るので注意。

使い方とオプションの詳細はこちらに書いてあります。

 

jmpress.js documentation

 

 

また「jmpress.js」と組み合わせて、「Slideshow with jmpress.js」というスライドショーを表示することができるjQueryもありました。

 

 

 プレゼンテーションツールとして紹介されているところが多いですが、webサイトに使ってみると面白そうです。

今度、「jmpress.js」を使ってwebサイトを制作してみます。ではまた。

【WordPress】あなたのブログを電子書籍に。プラグイン「BookPress」

こんにちは。

 WordPressには数多くのプラグインが存在します。プラグインをインストールすると、いろいろな便利機能を追加できるのです。ソーシャルボタン をブログに付けたり、お問い合わせフォームを追加したり…どんな機能も5分もあれば追加できちゃうのです。

そんな便利なプラグインの中で、今日は気になるプラグインを一つ紹介したいと思います。「BookPress」です。

 このプラグインはインストールして、会員登録を行うと、ブログを電子書籍化できてしまうらしいのです。 らしいというのは、このサービスはまだ開始されていないからで、サイトでは2月1日から始まるβテストのユーザーを募集しています。大量のページや画像が載っているブログは有料らしいのですが、基本的には無料で利用できるとのこと。 そして電子書籍化したブログをAmazonで販売することもできるらしいのです。 開発者はTakayuki Miyauchiさん。WordPressで困ったときによくblogを参照させて頂いてます。

 

 このプラグインを使うといろいろなことができそうです。私達のサイトのブログのように、複数の人が書いたブログも共著として電子書籍化できそうですし、小説を書きたい人は自分のサイトで連載持つことができます!レシピを公開しているブログでは自分のクッキング本なんていいかもしれません。

 まだ公開していないので想像でこのブログを書いてしまいましたが、とにかくいろいろと使い道はありそうです。最近kindleを買った私にとってはタイムリーな話題だったので、今回書かせて頂きました。

公開後、実際に利用したらレビューを書いてみようと思います。

 

 

 

【WordPress】フリーテーマをダウンロードする際のリスク

 

 

明けましておめでとうございます!

 

最近ヒマがあればクールなwordpressテーマを探しています。

wordpressは、テーマを導入してしまえば自動的にサイトのデザインを設定してくれるので、自分でレイアウトに悩んだり、コードを書く必要がないってことです!またCMSなので、テキストエディタを使ってコンテンツの追加・更新・削除が可能です。ということは、HTMLやCSSを知らなくてもウェブサイトが簡単に制作できるんですね。この手軽さがwordpressを世界中に広めている理由だと思います。

「wordpress theme」と検索すると無料・有料問わず様々なデザインのテーマが出てきます。もちろん有料のは質の高いものが多いですが、無料のテーマでも有料のものと遜色ない素晴らしいテーマが存在します。しかし!無料でかっこいいテーマが手に入るなんてラッキー♪かと思いきや、webサイト上で公開されている無料のテーマはかなり危険が潜んでいるようです。

こちらにその理由が書かれています。

Why free WordPress themes are risky for new bloggers

http://www.thetechnomag.com/2012/10/why-free-wordpress-themes-are-risky-for-new-bloggers/

理由がいくつか書かれていますが、要はフリーテーマの中に悪意のあるコードが含まれている可能性があり、wordpress内の他のコードを勝手に書き換えられたり、サーバーに深刻なダメージを与える危険性があるとのことです。

上記ブログ内では、解決策として有料のテーマを買いなさい!としか書かれていません。

でもやっぱり無料で手に入れたい…

ということで、安全に無料のテーマを手に入れる方法を調べてみました。

1.公式ディレクトリ内で無料のテーマを手に入れる

 

 

WORDPRESS.ORG Themes Directory http://wordpress.org/extend/themes/

公式ディレクトリ内であればCodexに準拠したものなので安心です。

また、フィードバックが公開されているので、ダウンロードする際に参考になります。

1月10日現在、1,656の無料テーマが公開されています。

 

2.リスク検証用のプラグインを利用する

無料のテーマの中に悪意のあるコードが書かれていないかをチェックするためのプラグインが存在します。

AntiVirus http://wordpress.org/extend/plugins/antivirus/

Theme-Check http://wordpress.org/extend/plugins/theme-check/

Theme Authenticity Checker (TAC) http://wordpress.org/extend/plugins/tac/

Exploit Scanner http://wordpress.org/extend/plugins/exploit-scanner/

これらのプラグインを利用すれば不正なコードが組まれていないかチェックすることができますが、完全には検出できないようです。

ということで、結論。無料のテーマを安全かどうかを完全にチェックすることは不可能です。自分でPHPコードを理解・分析できる人以外は公式ディレクトリ内でテーマを探しましょう。もしくは提供元がはっきりとしたテーマしかダウンロードしないこと。

参考サイト

FIRE GODY様 http://firegoby.jp/archives/3530